多图形覆盖

时间 2019-11-21

标签图形覆盖繁體版

原文原文链接

将所须要的网页图形放到一张上，经过进行部分遮盖，留出所需图形，这样可减小请求时间，效率更高。html

原图以下：url

代码以下：htm

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>多图形</title>
    <style>
        .tp1{
            background-image: url("shopping_bg.png");
            float:left;
            width:114px;
            height:100px;
            background-repeat: no-repeat;

        }
        .tp2{
            background:url("shopping_bg.png");
            float:left;
            background-position: 10px -100px;
            width: 114px;
            height: 35px;
            background-repeat: no-repeat;

        }
        .tp3{
            background:url("shopping_bg.png");
            float:left;
            background-position: 10px -145px;
            width: 114px;
            height: 27px;
            background-repeat: no-repeat;

        }
        .tp4 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 20px -178px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp5 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -223px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp6 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -271px;
            width: 114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp7 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -321px;
            width:114px;
            height: 33px;
            background-repeat: no-repeat;

        }
        .tp8 {
            background: url("shopping_bg.png");
            float: left;
            background-position: 10px -376px;
            width:114px;
            height: 20px;
            background-repeat: no-repeat;

        }
    </style>
</head>
<body>
   <div class="tp1">

   </div>
   <div class="tp2">

   </div>
   <div class="tp3">

   </div>
   <div class="tp4">

   </div>
   <div class="tp5">

   </div>
   <div class="tp6">

   </div>
   <div class="tp7">

   </div>
   <div class="tp8">

   </div>
</body>
</html>

运行代码后以下：

这样作的结果可以让每一个图都置顶表现，全部上半部分被顶遮住，若想将图移到其余位置，可利用div进行设置。blog