多图形覆盖

最新推荐文章于 2023-08-06 22:34:17 发布

anliao6401

最新推荐文章于 2023-08-06 22:34:17 发布

阅读量166

点赞数

原文链接：http://www.cnblogs.com/yyt-caroline/p/4909849.html

版权

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

原图如下：

代码如下：

<!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进行设置。

转载于:https://www.cnblogs.com/yyt-caroline/p/4909849.html

anliao6401

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
多图形覆盖

将所需要的网页图形放到一张上，通过进行部分遮盖，留出所需图形，这样可减少请求时间，效率更高。原图如下：代码如下：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>多图形</title> <st...
复制链接

扫一扫