css sprites
2019-02-02 本文已影响0人
嘤嘤嘤998
CSS Sprites其实就是把网页中一些背景图片整合拼合成一张图片中，再利用DIV CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位
eg:
background: url("bg.png") no-repeat 0 -192px;
sprites优势:
- 减少http iis请求数,从而提高页面的性能，这是图片精灵的最显著特点，也是被广泛应用的主要原因。
- 利用图片精灵还能减少图片的字节，你使用9张小的图片，一张4KB，9张就是36KB，而把他们都放一张图片上，只需要4KB到5KB就可。
- 在整理图片的过程中，不需要再纠结如此大量图片的名字问题，多张放在一张上，只需要取一个综合的名字就可以了。
- 如果想改变网站风格，你只需要处理一张图片就可以了，把一张图片的颜色和风格一改，那么整个网站的风格就都变了，便于后期的维护和修改。
sprites缺点:
- 开发的时候比较麻烦，你要通过photoshop(PS)或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐。你需要考虑当前盒子会不会漏出其他的背景图，比较头疼的是，页面自适应时，背景图的位置就没那么容易掌控了。
- 在维护的时候比较麻烦，因为他是多张图在一张图上，牵一发而动全身的感觉。轻易不要改变其他图片的位置，原位能放下就在原位改，放不下就在下面添加。
一般企业网站不是很推荐使用CSS Sprites
大网站大流量网站推荐使用，这样比较值得。
滑动门
三张背景图
image.png
效果
image.png
代码
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img ,input, button {
margin:0;
padding:0;
}
ul {
list-style: none;
}
div {
width: 980px;
height: 74px;
margin: 0 auto;
background: red;
}
.left {
background: url(./c1.jpg) no-repeat;
width: 22px;
height: 74px;
float: left;
}
.content {
background: url(./c3.jpg) repeat-x;
height: 74px;
width: 938px;
float: left;
}
.right {
float: right;
background: url(./c5.jpg) no-repeat;
width: 20px;
height: 74px;
}
</style>
</head>
<body>
<div>
<ul>
<li class="left"></li>
<li class="content"></li>
<li class="right"></li>
</ul>
</div>
</body>
</html>
