1.安装compass。（需要先安装ruby）

命令行：gem install compass

2.新建一个compass 项目

命令行：compass create myproject

3.在myproject中新建一个images文件夹，将需要转换的图片放入images新建的share文件中

并在scss文件中写入：

@import "compass/utilities/sprites";

@import "share/*.png";
@include all-share-sprites;

命令行：compass compile

完成，images文件夹下会显示雪碧图

注意：ruby对编码的苛刻，路径，命名不能有中文以及非法字符

compass制作sprite雪碧图的更多相关文章

  1. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

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

    ---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...

  3. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  4. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  5. 移动端适配之sprite雪碧图背景定位

    移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...

  6. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  7. Sprite(雪碧图)的应用

    雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...

  8. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  9. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

随机推荐

  1. LevelDB(v1.3) 源码阅读之 Slice

    LevelDB(v1.3) 源码阅读系列使用 LevelDB v1.3 版本的代码,可以通过如下方式下载并切换到 v1.3 版本的代码: $ git clone https://github.com/ ...

  2. ios 数组排序

    第一种:利用数组的sortedArrayUsingComparator调用 NSComparator  示例: obj1和obj2指的是数组中的对象 //1.数组中存放的是字符 NSComparato ...

  3. SecureCRT使用

    SecureCRT可以说是linux远程终端的代名词,关于它的一些技巧必须掌握,,, 1.解决中文乱码 登陆主机,运行locale命令,确定语言选项LANG是否为 zh_CN.gb2312 或者 en ...

  4. Android Matirx的简介

    在Android中,对图片的处理需要使用到Matrix类,Matrix是一个3 x 3的矩阵,他对图片的处理分为四个基本类型: 1.Translate————平移X,Y轴变换,而不是移动图形 2.Sc ...

  5. netbeans php安装、调试

    文件清单 jdk-8u45-windows-i586_8.0.450.14.1429092020.exe netbeans-8.0.2-php-windows.exe wampserver2.5-Ap ...

  6. Git--用git建立code库

    利用点时间,把自己这段时间使用git的工具的内容,使用过程中遇到的问题都梳理下.首先我们建立一个文件库(基于Ubuntu系统): 1.必须要安装: [html]  view plain copy   ...

  7. eclipse开发web应用程序步骤（图解）

    *运行环境(也就是服务器的选择) 环境搭建好之后开始编写web程序!然后右键->Run as -> Run on Server!

  8. gulp-notify处理报错----gulp系列（二)

    上一节,以less为例,入门了gulp,并为任务结构做了抽离. 前端们,gulp该用起来了,简单的demo入门——gulp系列(一) 本节学习下gulp-notify,官方这样解释的: gulp-no ...

  9. Linux - Yum的常用方法总结

    简述 rpm是由红帽公司开发的软件包管理方式,使用rpm可以方便的进行软件的安装.查询.卸载.升级等工作. 但是rpm软件包之间的依赖性问题往往会很繁琐,尤其是软件由多个rpm包组成时. Yum(全称 ...

  10. "浅谈Android"第二篇：活动(Activity)

        距离上一篇文章,过去有半个多月了,在此期间忙于工作,疏于整理和总结,特此写下这篇博文,来谈谈自己对Activity的理解.总所周知,Activity组件在Android中的重要性不言而喻,我们 ...