当前第2页 返回上一页
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <style>
.box {
width: 600px;
height:300px;
border: 3px solid #ccc;
background-color: #8064A2;
}
span {
display: inline-block;
width: 25px;
height: 25px;
border: 3px solid #ccc;
background-image: url(css/img/sidebar.png);
background-repeat: no-repeat;
margin: 5px;
}
.icon1 {
background-position: 0 0;
}
.icon2 {
background-position: -40px 0;
}
.icon3 {
background-position: 0 -25px;
}
.icon4 {
background-position: -40px -25px;
}
</style>
|
效果图：
CSS Sprites 的优点：
1、减少图片的字节
2、减少了网页的http请求，从而大大的提高了页面的性能
3、减少命名难的问题。
4、维护起来更加方便。
CSS Sprites 的缺点：
1、在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
2、CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
以上就是css sprite如何使用的详细内容，更多文章请关注木庄网络博客！
返回前面的内容
相关阅读 >>
css page-break-after属性怎么用
纯css实现图片左右翻转效果（附代码）
css中的classlist的意思是什么
css按钮如何去掉边框
怎么用css实现左右运动效果
css换行代码是什么
css怎么设置字体为微软雅黑
如何查看div被设置什么css样式
html+css实现网页滑动门效果实例分享
css设置字体大小的属性名是什么
更多相关阅读请进入《css》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » css sprite如何使用
