CSS Sprite的使用
2015-09-19 22:09
686 查看
在前端优化的过程中,其中有一条就是要减少http的请求,来提高效率。所以在有很多小图片组成的网页中,往往会把很多小图片合并成一张图片,这样只要发送一次http请求就可以了。经过学习,可以通过CSS Sprite技术解决。
下面是一个例子:
CSS Sprite
需要知道大图的网格,小图标在图上的位置偏移(写进css里的background-position要加负号),和大小。
因为在web设计中最小单位通常为pixel .. 所以完全有可能通过精确控制背景图的显示坐标来达到期望的效果 .. lz可以定义一个类 .. 譬如".bg_sprite" ..
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
... ...
注意 .. 必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚 .. 下图说明 ..
具体的可以搜索css sprite ..
另外 .. 如果你是需要定义list或者dl的背景属性 .. 则不使用容器 .. 需要将背景图片中的元素竖向排列 .. 且间距要大 .. 这样才不会出现由于长度不够而导致背景图干扰的问题 ..
大图顶点就是原点(0,0)。小图顶点的坐标x,y必须取负值。
下面是一个例子:
CSS Sprite
需要知道大图的网格,小图标在图上的位置偏移(写进css里的background-position要加负号),和大小。
.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}
引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..
#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}
... ...
注意 .. 必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚 .. 下图说明 ..
具体的可以搜索css sprite ..
另外 .. 如果你是需要定义list或者dl的背景属性 .. 则不使用容器 .. 需要将背景图片中的元素竖向排列 .. 且间距要大 .. 这样才不会出现由于长度不够而导致背景图干扰的问题 ..
大图顶点就是原点(0,0)。小图顶点的坐标x,y必须取负值。
相关文章推荐
- css改变背景透明度【转】
- CSS
- CSS基础
- html+css基础1
- css知多少(11)——position
- CSS声明顺序
- 理解CSS的盒子模型和样式继承
- css知多少(10)——display
- css知多少(9)——float下篇
- css知多少(8)——float上篇
- 请给出一个左侧定宽右侧自适应的HTML结构及样式
- Spinner样式大全
- 使用 CSS3 实现 3D 图片滑块效果
- CSS样式 --- 文字样式 【时刻更新】
- JS+CSS实现简单滑动门(滑动菜单)效果
- css Reset
- CSS样式 --- 鼠标光标样式 【时刻更新】
- 2015-09-17html课程总结2+了解css
- Extjs中设置只读的样式问题
- css 清除浮动 clearfix