CSS Sprite（CSS雪碧图）

今天看到慕课网分享的Mozilla的CSS开发者指南，当中谈到了CSS雪碧图，觉得有用，遂整理一下。

之所以用雪碧图，是因为一个网站若有很多的小图标，相对于将每个小图标以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

CSS Sprite（CSS雪碧图）相关推荐

一篇文章教你学会如何使用CSS中的雪碧图（CSS Sprite）
一篇文章教你学会如何使用CSS中的雪碧图(CSS Sprite) 一.什么是雪碧图? 雪碧图(CSS Sprite)又叫CSS精灵图,是一种网页图片应用处理方式,他允许你将一个页面设计到所有零星图片 ...
【无标浮动特性应用实例】二、CSS 精灵（雪碧图、精灵图）三、滑动门四CSS 定位{相对定位}
[无标浮动特性应用实例] 总结:浮动脱离文档流不脱离文本流 - 最初只用于在成块的文本内浮动图像为图片和文字之间的对齐方式是基线对齐要想图文环绕需要给图片设置浮动应用实例-两列自适应实现要点 ...
HTML+CSS 背景之雪碧图+渐变
一:雪碧图雪碧图是什么? 一个页面可能会用到多个图片或者图标,如果每个图片都是一个单独的文件,则需要浏览器进行多次加载,浪费性能和带宽. 而且在某也情况下图片会延迟加载,导致用户体验不好. 将多个图 ...
sprite（雪碧图，也叫精灵图）
1.css sprite 中文名为雪碧图,也叫精灵图,是基于background-image和background-position 实现的显示技术就是将一个有很多图标的图片,通过控制图片显示位置 ...
CSS 精灵（雪碧图、精灵图）
学习目标能够说出什么是CSS精灵掌握CSS精灵在实际示案例中的应用概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图 ...
CSS 精灵（雪碧图、精灵图）、滑动门
概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS 贴图定位":其实就是把网页中一些背景图片整合到一张图片文件中,再 ...
二、CSS 精灵（雪碧图、精灵图）
- 能够说出什么是CSS精灵 - 掌握CSS精灵在实际示案例中的应用 ### 概述 css精灵英文叫法 css sprites,通常被解释为"CSS 图像拼合"或"CSS ...
猿人学第四题-CSS加密【雪碧图、样式干扰】
练习链接:http://match.yuanrenxue.com/match/4 学习链接: https://bbs.tampermonkey.net.cn/thread-203-1-2.html h ...
CSS3—雪碧图和滑动门
一.CSS Sprite(雪碧图) CSS Sprite也叫CSS精灵.CSS雪碧图,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时, ...
前端开发工具介绍----合成雪碧图工具（css sprite）
合成雪碧图Sprite工具 1.国外的在线合成工具:http://csssprites.com/ 选择需要合并的文件----设置option选项(包括:元素的间距,排列方式,背景颜色,边框)----- ...

CSS Sprite（CSS雪碧图）

CSS Sprite（CSS雪碧图）相关推荐

最新文章

热门文章