compass制作sprite雪碧图

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对编码的苛刻，路径，命名不能有中文以及非法字符

时间： 2024-11-06 20:23:23

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

CSS Sprite 雪碧图制作

CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需要相关图标时,根据background-position设置坐标值,达到目的. 一个例子,可以复制然后看一下效果: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo

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

---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样做的好处是:减少了网站的HTTP请求次数 **compass如何合并雪碧图** 1. 把需要合并的图片(1.png,2.png,3.png…)放在images文件下的新建一个文件夹test 2. 在SCSS文件中 用 @import 指向这些上述图片们,然后compass会自动将这些图片们合并成一个

CSS Sprite雪碧图应用

CSS Sprite CSS雪碧图 为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 雪碧图使用场景: 1.静态图片,不随用户信息的变化而变化 2.小图片,图片容量比较小 3.加载数量比较大 4.一些大图不建议拼成雪碧图 (减少HTTP请求数,加速内容显示) 雪碧图实现原理:background-position 移动位置时,坐标都需要设置成负值 雪碧图生成方式 1.PS手动拼图 2.大项目通常使用

css sprite 雪碧图

一.什么是雪碧图? 1.我们先来看一下淘宝上面用到的雪碧图实例: a.前端展示 b.css雪碧图为 2.概念 CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了. 3.什么时候用到雪碧图? a.静态图片,不随用户信息的辩护而变化 b.小图片,图片容量比较小 c.加载量比较大 4.工具介绍 刚刚下载了一个比较实用的雪碧图工具Css Spri

【HTML+CSS】CSS Sprite雪碧图

1. 雪碧图的使用场景 (1). 静态图片,不随用户信息的变化而变化 (2). 小图片,图片容量比较小 (3). 加载量比较大 一些大图不建议拼成雪碧图,例如淘宝网站的导航图片都是使用的雪碧图. 2. 使用雪碧图可以减少http请求数量,加速内容显示.每请求一次,就会和服务器链接一次,建立链接时需要额外时间的. 3. 实现原理 使用background-position属性: 需要使用雪碧图的时候,便宜x和y的值就可以了. 4. 实现方式: 一种方式是使用PS手动拼图: 另一种方式是使用spri

Sprite(雪碧图)的应用

雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求,这样一来,一是造成资源浪费,二是会导致访问速度变慢. 把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 我们来看看实现条件: 1.要有装图片的容器宽高 2.引用背景图的文件 3.精准定位改图(background-p

Css Sprite(雪碧图、精灵图)&lt;图像拼合技术&gt;

一.精灵图使用场景: 二.Css Sprite(优点) 减少图片的字节. 减少网页的http请求,从而大大的提高页面的性能. 解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率. 更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变.维护起来更加方便. 三.实现原理 css background-position 控制一个层可显示的区域范围大小,通过一个窗口进行背景图的滑动实例: 代码如下

移动端rem布局背景图片使用以及sprite雪碧图

现在移动端页面用rem布局已经是一大流派了,成熟的框架如淘宝的flexiable.js,墨尘写的更轻量级的hotcss.用rem作单位使得元素能够自适应后,还有一块需要关注的,那就是背景图片. rem布局 所谓rem布局就是指为文档的根节点<html>元素设置一个基准字体大小,然后所有的元素尺寸都以rem为单位来写.比如将<html>的字体设为100px,如果需要做一个100*200的元素,css如是写: div{ width: 1rem; height: 2rem; } 那么最终

css Sprite雪碧图

一原理: 其实原理很简单,就是使用background-position在一张大图中定位裁剪出我们需要的一个部分,然后用这个部分当作单个的图片使用. background-position(x,y). 简单描述:以图片的左上角为原点坐标,两个参数分别为x,y轴. 原文地址:https://www.cnblogs.com/qianxunpu/p/8249947.html