CSS Sprite(CSS雪碧图)
2015-08-25 09:09
405 查看
今天看到慕课网分享的Mozilla的CSS开发者指南,当中谈到了CSS雪碧图,觉得有用,遂整理一下。
之所以用雪碧图,是因为一个网站若有很多的小图标,相对于将每个小图标以png的格式引用到页面上,是用雪碧图只需要引用一张图片,对于内存和带宽更加友好。
实现如下:
假设通过.btn的类,为该类添加一张背景图片:
背景的位置,可以通过在background的rul()中直接定义X,Y的值,或者通过background的属性来添加。例如:
类似的,你可以添加hover来改变背景:
之所以用雪碧图,是因为一个网站若有很多的小图标,相对于将每个小图标以png的格式引用到页面上,是用雪碧图只需要引用一张图片,对于内存和带宽更加友好。
实现如下:
假设通过.btn的类,为该类添加一张背景图片:
.btn {background:url(myfile.png); display:inline-block; height:20px; width:20px }
背景的位置,可以通过在background的rul()中直接定义X,Y的值,或者通过background的属性来添加。例如:
#btn1 {background-position: -20px 0px} #btn2 {background:url(myfile.png) -20px 0px no-repeat}id为btn1和btn2的元素背景均左移20px.
类似的,你可以添加hover来改变背景:
#btn:hover {background-position: [pixels shifted right]px [pixels shifted down]px;}详情见CSS雪碧图 完整demo