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)这种单个的写法是不兼容的，然后吐槽为了火狐要写好多代码哈哈哈

时间： 2024-10-27 11:52:36

css script 雪碧图 动态更改背景的相关文章

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的. 一个例子,可以复制然后看一下效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

CSS Sprite雪碧图应用

CSS Sprite CSS雪碧图 为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 雪碧图使用场景: 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载数量比较大 4.一些大图不建议拼成雪碧图 (减少HTTP请求数,加速内容显示) 雪碧图实现原理:background-position 移动位置时,坐标都需要设置成负值 雪碧图生成方式 1.PS手动拼图 2.大项目通常使用

css sprite 雪碧图

一.什么是雪碧图? 1.我们先来看一下淘宝上面用到的雪碧图实例: a.前端展示 b.css雪碧图为 2.概念 CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 3.什么时候用到雪碧图? a.静态图片,不随用户信息的辩护而变化 b.小图片,图片容量比较小 c.加载量比较大 4.工具介绍 刚刚下载了一个比较实用的雪碧图工具Css Spri

CSS Sprites ——雪碧图的使用方法

首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每个图片的坐标,这样不但减少http请求,而且还降低了图片的大小,加快图片的加载速度,对前端开发的朋友来说是必备技能.更详细的解释请到[百度百科]围观. 雪碧图使用场景 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载量比较大 注:一些大图片.有动态效果图片无需使用雪碧图

【HTML+CSS】CSS Sprite雪碧图

1. 雪碧图的使用场景 (1). 静态图片,不随用户信息的变化而变化 (2). 小图片,图片容量比较小 (3). 加载量比较大 一些大图不建议拼成雪碧图,例如淘宝网站的导航图片都是使用的雪碧图. 2. 使用雪碧图可以减少http请求数量,加速内容显示.每请求一次,就会和服务器链接一次,建立链接时需要额外时间的. 3. 实现原理 使用background-position属性: 需要使用雪碧图的时候,便宜x和y的值就可以了. 4. 实现方式: 一种方式是使用PS手动拼图: 另一种方式是使用spri

Css Sprite(雪碧图、精灵图)&lt;图像拼合技术&gt;

一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 三.实现原理 css background-position 控制一个层可显示的区域范围大小,通过一个窗口进行背景图的滑动实例: 代码如下

css Sprite雪碧图

一原理: 其实原理很简单,就是使用background-position在一张大图中定位裁剪出我们需要的一个部分,然后用这个部分当作单个的图片使用. background-position(x,y). 简单描述:以图片的左上角为原点坐标,两个参数分别为x,y轴. 原文地址:https://www.cnblogs.com/qianxunpu/p/8249947.html

CSS Spritec下载,精灵图，雪碧图，初探之原理、使用

CSS Spritec下载,精灵图,雪碧图,初探之原理.使用 关于CSS Sprite CSSSprites在国内很多人叫css精灵雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了.对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题. 加速的关键,不是降低重量,而是减少个数.传统切图讲究精细,图片规格越小越好,重量越小越

CSS中的背景、雪碧图、超链接的伪类样式

一.背景 1.背景颜色 background-color: red; 2.背景图片 background-image: url("../../img/l1.png"); 3.图片填充 background-repeat: no-repeat;(有这三个常用的属性值: no-repeat.repeat-x.repeat-y) 4.背景图片大小 background-size:100% 100%: cover(覆盖):(先让图片水平填满容器)图片等比例缩放,直到最小部分填满容器有可能会出现