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. 华为 HG8245C 光猫 修改无线用户数限制+hw_ctree.xml 文件解密

    这个操作方法是 从网上其他人提供的方法  和我一个朋友总结出来的,我只是负责整理,并实地在我自己的光猫上操作成功了 风险提示 :刷机有风险,操作需谨慎, 备份备份备份! 俺家,俺的新家是电信光纤接入, ...

  2. Unix sed实用教程开篇

    已经看了一段时间的Linux Shell编程了,也能完成一些基本的使用,为了加深理解,恰好看到了The Unix School的一个sed&awk教程,不是简单的命令参数堆积,而是一个相当实用 ...

  3. Gson解析数组多类型元素

    本文的出现是为了解决以下需求:使用Gson对json数组进行解析,但是数组里面元素的类型是多种的.数据如下: {"list":[{ "type":0, &quo ...

  4. WebApp MVC，“不一样”的轻量级互联网应用程序开发框架

    WebApp MVC 这是一个专门开发互联网程序的开发框架,跟之前的<EFW框架>使用情况不一样,EFW主要用于开发行业软件的快速开发:而WebApp又区别与别的MVC框架,比如AspNe ...

  5. slf4j日志系统

    slf4j:由外观模式实现,不是日志的解决方案,只是服务于各种各样的日志系统.可以让在应用部署的时候,选择合适的日志系统 slf4j + log4j : 配置日志文件:log4j.properties ...

  6. easyui menubutton combobox 被遮盖问题

    如图一所示,menubutton 中的 combobox 被遮盖 z-Index 不够.这是作者给出的解决方案 <a href="#" class="easyui- ...

  7. 简单Bat文件编写

    @ECHO OFFTITLE 清理Work目录E:cd E:\Android_WorkSpace@ECHO ONecho 开始打包MavenTest......mvn install pause @E ...

  8. java与javac版本不一致问题

    问题描述:    设置了环境变量JAVA_HOME为jdk1.5.0_14的安装目录,并且在PATH变量中加入了%JAVA_HOME%\bin,但在Windows命令行下,执行java -versio ...

  9. c# 时间戳转换为Datetime类型的时间

    private static DateTime GetConvertTime(long ltime) { DateTime dt_time=new DateTime(1970,1,1,8,0,0,0) ...

  10. Node.app – 用于 iOS App 开发的 Node.js 解释器

    Node.app 是用于 iOS 开发的 Node.js 解释器,它允许最大的代码重用和快速创新,占用资源很少,为您的移动应用程序提供 Node.js 兼容的 JavaScript API.你的客户甚 ...