【Sprite(雪碧图)的应用】的更多相关文章

CSS Sprite 雪碧图制作

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

CSS Sprite雪碧图

为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w…

CSS Sprite雪碧图的应用

CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 静态图片,不随用户信息的变化而变化. 小图片,容量比较小(2~3k). 图片加载量比较大. 目的 减少Http请求数量,加速内容显示.因为每请求一次,就会和服务器建立一次链接,而建立链接是需要额外的时间的. 使用 使用雪碧图之前,我们需要知道雪碧图中各个图标的位置. 从上面的图片不难看出雪碧图中各个…

CSS Sprite雪碧图应用

在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更优的解决方案是:雪碧图sprite. 所谓雪碧图就是把我们所需要的所有小图片用CSS sprite或者PS工具拼接成一张大图片,然后通过元素的background-image.background-positon属性完成图片的定位. 为此,我做了个Demo. 在学习的过程中,遇到了背景图片定位的问题,也就是b…

Sprite(雪碧图)的应用

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

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

移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高倒也无所谓,但是我不能忍啊. 方法就是利用background-position百分比值替换rem值 要想得到定位的百分比值(n m),我们需要 元素的宽高(w h), sprite图的宽高(k g),我们需要显示icon的坐标(x y),公式如下: 1 n = -x / (w-k) * 100%…

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

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

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

1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. 使用雪碧图能够降低http请求数量,加速内容显示.每请求一次,就会和server链接一次,建立链接时须要额外时间的. 3. 实现原理 使用background-position属性: 须要使用雪碧图的时候,设置x和y的值就能够了. 4. 实现方式: 一种方式是使用PS手动拼图: 还有一种方式是使用…

css sprite 雪碧图

使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导致访问速度变慢.这时候,把很多小图片(需要使用的小图标)放在一张图片上,按照一定的距离隔开,就解决了上述的两个问题. 显示雪碧图的条件: 1)需要一个设置好宽和高的容器 2)需要设置background-position的值(默认为(0,0),也就是图片的左上角),即移动图片到自己想要的图标位置.…

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-…