将所需要的网页图形放到一张上，通过进行部分遮盖，留出所需图形，这样可减少请求时间，效率更高。
原图如下：
代码如下：
<!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进行设置。
时间： 2024-10-10 03:03:37