css script 雪碧图 动态更改背景
最近了解了雪碧图,css script。然后自己去做了下发现好好玩,可以把所有的图片做成一张图,然后更改background-position的值来显示不同的背景。
做完以后我发现,以前经常做的点击或者悬浮啊等等事件改变img完全可以用一张图,再也不用找图标了/(ㄒoㄒ)/~~感动
先放下做的效果:
这是四个li,要求是点击每个li会改变对应的背景,结果是这样→_→
下面来说说实现方法,超简单啦~如果你自己不亲自PS雪碧图
1.首先把你所需要的所有图片做成一张雪碧图,像这样☟
2.生成每个图片的css文件,生成图片自带的,我用的是github上的一个,有机会想自己做一下
3.可以开始写代码了,有了以上的准备工作就很简单了
html部分:
css部分:
javascript部分:
好了,这样就OK了,在IE7/8/9/10 chrome firefox下面都是可以用的。
今天在群里看到关于backgroundPosition的兼容性问题,火狐下面 background-position-x(y)这种单个的写法是不兼容的,然后吐槽为了火狐要写好多代码哈哈哈