在前面我们已经了解到了网页当中背景的基本用法了,包括:
背景颜色,背景图片,背景图片是否重复,背景图片是否平铺等等基础样式。
今天要和大家讨论的是背景图的一个稍微高级一点的用法:图片精灵(也叫:雪碧图,css精灵)。先来看一些大网站:
这是淘宝,在这个地方就用到了雪碧图,再来看看这张图片是什么样子的
再来一个:百度
来看看这张背景图片:
虽然我不太理解作为百度,居然会把这么多的图标放在一张背景图片上,而且貌似这个页面也并没有用到这些图标;这些不在今天的讨论之列。我们今天就只是来看看图片精灵。
从上面两个互联网巨头的网站上来看,图片精灵这东西在网站当中的应用非常广泛,在此之前我本人也非常喜欢用雪碧图。
- 它体积小,为网站节省流量。
- 它集多张小图标于一张图片,减少了很多http请求。
- 它维护方便,一个页面上几乎所有的小图标都在这一张图片上了,增删改查都很能很方便的找到对应的位置
说了这么多,大家可能对图片精灵还是没有一个很好的概念,我们一点点来分析,为什么可以这么做:
首先我们可以通过css来给一个元素添加背景图片,详细参考前端零基础入门(七):基础css样式之background
在这篇文章里有一个特点我可能说的不是太清楚——如果用一个小盒子去显示一张大图片会怎么样呢?
首先我在页面中放入一个100*100的盒子:
为了让大家能看到它,我给它加上了一个边框,这没啥可说的。然后我给它添加一张背景图片,我们去找个好看点的图片A Little Bunny:(这张图片的尺寸是:413*548)
加入之后的效果:
发现只显示了图片的一部分,如果不是我的经验告诉我这效果没有问题,我甚至怀疑出现灵异事件了。其实现在的情况是这样子的,我用ps来给大家示意一下:
中间紫色的小方块代表我们的元素,它的尺寸是100*100;然后加入背景图片:
为了让大家能看的清楚,我把我们的“元素”变成半透明的,于是乎,大家可以看到一个结果,元素里面显示的原来是背景图片的左上角,而图片其余的部分因为太大,所以没有显示在元素中。这就像我们去贴宣传海报,把一个海报贴墙上,自然能完整的展示,但是我们现在的情况是把一张巨幅海报贴在了一个快递盒子上,那快递盒子外面的剩余部分的海报自然也就看不见了。被裁剪掉了。
当我们增大元素的宽高,就能看到更多的背景图片了:
现在我把元素的宽高调整成300*300 终于,小兔子可怜兮兮的眼睛露出来了。不过这时候,如果有一个条件限制:元素的宽高不能再增加了,但是却要看到小兔子的脸!怎么办? 现在一张巨幅海报在手上,但是只有一个快递盒子,然后要在这个盒子中显示最重要的内容。怎么办?当然是把最重要的这一部分贴上去,其余部分不要了嘛。于是乎我们可以去挪动一下背景图片的位置。之前我们了解到背景图片可以利用background-position来移动位置,我们来试试:
.box{
width:300px;
height:300px;
border:1px solid #0c5460;
background: url("img/bunny.jpg") no-repeat;
background-position:10px 10px;
}
先来个10个像素试试水:
发现小兔子往右下角移动了:background-position接收两个参数,第一个参数代表背景图片X轴上的偏移量,第二个值代表背景图片在Y轴上的偏移量,网页当中Y轴和我们数学中的Y轴是相反的,于是乎小兔子就往右下角跑了,但是很明显小兔子的脸就在右下角,所以我们应该让小兔子往左上角跑才对。
可以利用background-position负值。这条属性是可以接收负值的 X轴给正值是往右边走,那负值自然就是往左边走了。Y轴同理。再来:
.box{
width:300px;
height:300px;
border:1px solid #0c5460;
background: url("img/bunny.jpg") no-repeat;
background-position:-50px -50px;
}
看效果:
小兔子的半张脸都出来了,那么这时候要显示整张脸就只是时间问题了,调整就好了。现在的情况我们在用ps来演示一下:
由此可见,调整盒子的大小就能决定显示多少背景图片,而调整背景图片的位置,就能指定显示哪一块背景图片。这时候我们哪一张图片精灵来试试,把图片就替换成刚才百度的那张背景图:
可以看到在这个元素中就显示了很多个图标,现在我们是没有办法显示其中某一个图标的,因为元素太大了。调整元素的大小:
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
}
发现元素中什么都没了,这其实也正常,因为这张图片的右上角本就是一片空白,现在的情况是这样的:
紫色部分依然代表元素,灰色部分是背景图片,元素确实够小了,差不多只能显示一个小图标,但是背景图的位置不对,于是再去调整背景图片的位置。图片有内容的部分都在右下角,所以要把图片往左上角移动—— 那么background-position就必须给负值。 随便来一个值:
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -300px -200px;
}
得到效果:
显示了一个图标的小角,再微调一下,往下再来一点:
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -300px -190px;
}
一定要记得Y轴是第二个值,往下的话就把值调大一点:
现在的情况再来看看ps:
调整对应的值,得到的效果也是一样的。那么这个300,190其实代表的就是这个图标的坐标。直接在图片上可以量出来的:
比如我现在要显示这一块:
那么直接去量这一块距离图片左上角的距离就可以了:
可以看到距离图片的顶部是158px, 距离图片的左边是638px ;
调整background-position:记住都要给负值!!!!
.box{
width:30px;
height:30px;
border:1px solid #0c5460;
background: url("img/icons_5859e57.png") no-repeat;
background-position: -638px -158px;
}
效果:
现在由于元素太大,还显示了这个图标以外的一小部分,再去调整元素的大小就好了。
那么在实际工作中,我们要做的就是从设计稿上把所有的小图标收集起来,放在一张图片上,并且排好版。一般来说我会画一个50*50的网格,这个网格的大小看图标而定。然后把一个个的小图标放在网格的中间,然后用的时候就直接用网格的坐标就可以了,非常的方便!
我做了一个小Case。帮助大家去理解雪碧图。有兴趣可以点点~
————————————————————————————————————————————————————————
最后总结:
雪碧图的好处
- 它体积小,为网站节省流量。
- 它集多张小图标于一张图片,减少了很多http请求。
- 它维护方便,一个页面上几乎所有的小图标都在这一张图片上了,增删改查都很能很方便的找到对应的位置
- ……
未来:虽然雪碧图已经很好了,不过慢慢的已经不够满足开发需求了,将来将会是字体图标的天下。期待后续推出的字体图标篇吧~