【HTML+CSS】(2)CSS Sprite雪碧图
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雪碧图的更多相关文章
- CSS Sprite 雪碧图制作
CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...
- CSS Sprite雪碧图
为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...
- CSS Sprite雪碧图的应用
CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...
- CSS Sprite雪碧图应用
在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...
- css sprite 雪碧图
使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...
- Sprite(雪碧图)的应用
雪碧图是根据CSS sprite音译过来的,是将很多很多的小图标放在一张图片上. 使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多的小图标,浏览器在显示页面的 ...
- compass框架的sprite雪碧图的用法简要
---恢复内容开始--- **简介** CSS SPRITE 即 CSS雪碧,即是将诸多图片合成一张图片,然后使用CSS 的background和background-position属性渲染. 这样 ...
- 移动端适配之sprite雪碧图背景定位
移动端适配一般我会使用rem进行适配,大致操作就是按照一定尺寸设计稿进行制作,最后将所有px值转换为rem,但是一些手机背景精灵图(cssSprite)就会出现一些误差(1px左右),如果公司要求不高 ...
- compass制作sprite雪碧图
1.安装compass.(需要先安装ruby) 命令行:gem install compass 2.新建一个compass 项目 命令行:compass create myproject 3.在myp ...
随机推荐
- json,xml,html三种数据格式
json.xml.html xml解析如下: 1.DOM:基于XML文档树结构的解析 解析器读入整个文档,然后构建一个驻留内存的树结构,然后代码就可以使用 DOM 接口来操作这个树结构.优点:整个文档 ...
- 输入sql语句,将结果写入到xml文件
import java.io.FileOutputStream; import java.sql.Connection; import java.sql.DriverManager; import j ...
- bootstrap学习(全局CSS样式)(一)
布局容器 bootstrap需要为页面内容和栅格系统包裹一个.container容器.我们提供了两个作词用处的类.注意,由于padding等属性的原因,这两种容器类不能互相嵌套. .container ...
- JNI小试牛刀
JNI: JNI是Java Native Interface的缩写,它提供了若干的API实现了Java和其他语言的通信(主要是C&C++).从Java1.1开始,JNI标准成为java平台的一 ...
- 对js原型简单的理解和图解
对js原型简单的理解和图解 最近在努力的学习js中,今天就抽了个空把自己理解的原型,记下一下在笔记中,以后自己查看,有空在会把原型链记录一下. 1.prototype prototype:是一个函数的 ...
- 什么是webview
WebView(网络视图)能加载显示网页,可以将其视为一个浏览器.它使用了WebKit渲染引擎加载显示网页,实现WebView有以下两种不同的方法:第一种方法的步骤:1.在要Activity中实例化W ...
- Windows 7下Maven3.0.3的安装
1.去Maven官网下载zip的maven3.0.3压缩包 2.将安装包解压到某目录,我在这里解压到D:\Program Files (x86)\apache-maven-3.0.3 3.设置系统变量 ...
- Qunit的使用
1.新建一个html页面,如下 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "ht ...
- 《Linux操作系统编译构建指南》
在线阅读地址:http://www.doc88.com/p-5126905896771.html Linux编译构建定制qq群: 521902245 文件夹...0 前言...3 第零章 绪论...5 ...
- maven工程小红叉处理方法
搞了个Maven工程在Eclipse上,刚开始说JDK版本不对,编译的时候老报错误,很容易搞明白, 本地JDK版本为1.7.0_79: diamond operator is not supporte ...