css script 雪碧图 动态更改背景

时间:2022-11-21 22:54:19

最近了解了雪碧图,css script。然后自己去做了下发现好好玩,可以把所有的图片做成一张图,然后更改background-position的值来显示不同的背景。

做完以后我发现,以前经常做的点击或者悬浮啊等等事件改变img完全可以用一张图,再也不用找图标了/(ㄒoㄒ)/~~感动

先放下做的效果:

css script 雪碧图 动态更改背景这是四个li,要求是点击每个li会改变对应的背景,结果是这样→_→css script 雪碧图 动态更改背景

下面来说说实现方法,超简单啦~如果你自己不亲自PS雪碧图

1.首先把你所需要的所有图片做成一张雪碧图,像这样☟

css script 雪碧图 动态更改背景

2.生成每个图片的css文件,生成图片自带的,我用的是github上的一个,有机会想自己做一下

css script 雪碧图 动态更改背景

3.可以开始写代码了,有了以上的准备工作就很简单了

html部分:

css script 雪碧图 动态更改背景

css部分:

css script 雪碧图 动态更改背景

javascript部分:

css script 雪碧图 动态更改背景

好了,这样就OK了,在IE7/8/9/10 chrome firefox下面都是可以用的。

今天在群里看到关于backgroundPosition的兼容性问题,火狐下面 background-position-x(y)这种单个的写法是不兼容的,然后吐槽为了火狐要写好多代码哈哈哈