码迷,mamicode.com
首页 > 其他好文 > 详细

多图形覆盖

时间:2015-10-26 00:22:55      阅读:138      评论:0      收藏:0      [点我收藏+]

标签:

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

原图如下:

技术分享

代码如下:

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


 

多图形覆盖

标签:

原文地址:http://www.cnblogs.com/yyt-caroline/p/4909849.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!