1. 雪碧图的使用场景

(1). 静态图片。不随用户信息的变化而变化

(2). 小图片。图片容量比較小

(3). 载入量比較大

一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图。

2. 使用雪碧图能够降低http请求数量,加速内容显示。每请求一次,就会和server链接一次,建立链接时须要额外时间的。

3. 实现原理

使用background-position属性:

须要使用雪碧图的时候,设置x和y的值就能够了。

4. 实现方式:

一种方式是使用PS手动拼图;

还有一种方式是使用sprite工具自己主动生成一个大图,并返回了每个小图的坐标点,软件:CssGaga。

5. 使用方式:

在我们须要加入雪碧图的地方使用<i>标签(icon)。然后在样式中加入:

i {
background:url(sp.pgn);
background-position:0 -10px;
float:left;
display:inline;
width:30px;
height:24px;
}

通过改变background-position中x和y的值来替换小图,注意x和y值都是小于等于0的值。

【HTML+CSS】(2)CSS Sprite雪碧图的更多相关文章

  1. CSS Sprite 雪碧图制作

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

  2. CSS Sprite雪碧图

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

  3. CSS Sprite雪碧图的应用

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

  4. CSS Sprite雪碧图应用

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

  5. css sprite 雪碧图

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

  6. Sprite(雪碧图)的应用

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

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

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

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

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

  9. compass制作sprite雪碧图

    1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...

随机推荐

  1. [NOIp2016提高组]愤怒的小鸟

    题目大意: 平面直角坐标系的第一象限有n(n<=18)个点,你可以每次给出一个形如y=ax^2+bx的函数把经过这条函数的点消掉,问消掉所有的点至少要多少函数? 思路: 枚举每两个点对,可以唯一 ...

  2. kosaraju算法求强连通分量

    什么是强连通分量?在这之前先定义一个强连通性(strong connectivity)的概念:有向图中,如果一个顶点s到t有一条路径,t到s也有一条路径,即s与t互相可达,那么我们说s与t是强连通的. ...

  3. HDU 5631 Rikka with Graph 暴力 并查集

    Rikka with Graph 题目连接: http://acm.hdu.edu.cn/showproblem.php?pid=5631 Description As we know, Rikka ...

  4. nor flash 和nand flash 的区别

    ROM和RAM指的都是半导体存储器,ROM是Read Only Memory的缩写,RAM是Random Access Memory的缩写.ROM在系统停止供电的时候仍然可以保持数据,而RAM通常都是 ...

  5. 【js】js数组置空的三种方式

    方式1: var arr = new Array(1,2,3); alert(arr); arr.splice(0, arr.length); alert(arr); 方式2: var arr = n ...

  6. JAVA常见算法题(二十八)

    package com.forezp.util; import java.util.Arrays; /** * 两个int数组,都是从小到大的的排列,请合并为一个新的数组,也是从小到到大的排列, * ...

  7. 三种主流的Web服务实现方案(REST+SOAP+XML-RPC)简述及比较

    目前知道的三种主流的Web服务实现方案为:REST:表象化状态转变 (软件架构风格)SOAP:简单对象访问协议 XML-RPC:远程过程调用协议 下面分别作简单介绍: REST:表征状态转移(Repr ...

  8. [转]在Excel中使用SQL语句实现精确查询

    本文转自:http://blog.sina.com.cn/s/blog_5fc375650102e1g5.html 今天在微博上看到@数据分析精选 分享的一篇文章,是关于<在Excel中使用SQ ...

  9. DXR

    https://github.com/ConfettiFX/The-Forge/blob/master/CommonRaytracing_3/ThirdParty/DXR/doc/D3D12%20Ra ...

  10. 十招让Ubuntu 16.04用起来更得心应手

    Ubuntu 16.04是一种长期支持版本(LTS),是Canonical承诺发布五年的更新版.也就是说,你可以让这个版本在电脑上运行五年!这样一来,一开始就设置好显得特别重要.你应该确保你的软件是最 ...