---恢复内容开始---
**简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染。 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个图片 @import "test/*.png";//表示所有的png格式的图片 3. 关于图片们的合并方向: 默认下,是竖着。
要修改排列方向: /*水平排列*/
$test-layout:horizontal;
@import "test/*.png" /*对角线排列*/
$test-layout:diagonal;
@import "test/*.png" 4. 使用雪碧图: @include all-文件夹名-sprites; 自动就是无平铺的no-repeat; 5. 若要在某个指定选择器中使用雪碧图中的某个图片: div{
@include test-sprite(图片文件名);//图片文件名不必后缀 } 6. 指定指定选择器的高度和宽度(要有高度哟。不然网页中看不到图 的): div{
@include test-sprite(图片文件名);
/*设定宽高*/
height:test-sprite-height(图片文件名);
width:test-sprite-width(图片文件名); }
**注意:关于合并图片的格式**
貌似只能是PNG格式的
---恢复内容结束---