compass框架的sprite雪碧图的用法简要

最新推荐文章于 2021-03-18 21:43:46 发布

weixin_30314631

最新推荐文章于 2021-03-18 21:43:46 发布

阅读量104

点赞数

原文链接：http://www.cnblogs.com/hamsterPP/p/4823523.html

版权

---恢复内容开始---

**简介**

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格式的

---恢复内容结束---

转载于:https://www.cnblogs.com/hamsterPP/p/4823523.html