【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 ...
随机推荐
- 5分钟上手TypeScript
安装TypeScript 安装这个工具有两种方式: 用npm安装npm install -g typescript 安装visual studio的TypeScript插件 编译TypeScript ...
- ERROR 1044: Access denied for user: 'songyan' to database 'yikexiao' 的错误。
问题描述:新买的服务器,刚安装了mysql,创建了一个用户,也忘记了给他分配了什么权限,今天在建库的时候出现了这个问题. 出错原因:度娘告诉我是因为songyan用户没有建库的权限报的错. 解决: ( ...
- mybatis查询日期时间数据得到long类型数据的问题
使用mybatis查询数据时,如果数据库存储的是timestamp.datetime.date.time等时间类型,而Java bean也使用的是date类型,mybatis会自动将date类型转换为 ...
- Fork & vfork & clone (转载)
转自:http://blog.csdn.net/zqy2000zqy/archive/2006/09/04/1176924.aspx 进程是一个指令执行流及其执行环境,其执行环境是一个系统资源的集合, ...
- C/C++控制台输出时设置字体及背景颜色
1.改变整个控制台的颜色用 system("color 0A"); 其中color后面的0是背景色代号,A是前景色代号.各颜色代码如下: 0=黑色 1=蓝色 2=绿色 3=湖蓝色 ...
- 查看iOS Crash logs
当应用在设备中运行发生崩溃,iOS将记录这些错误日志并且创建了崩溃报告(Crash Report).崩溃报告中包含了iOS的版本.日期.异常类型.堆栈跟踪以及其他信息. ① 在Xcode中查看崩溃报告 ...
- iOS:创建单例对象的两种方式
单例模式:创建单例对象的两种方式 方式一:iOS4版本之前 static SingleClassManager *singleManager = nil; +(SingleClas ...
- 通过HTTP发包工具了解HTTP协议
一.HTTP.pl功能简介 HTTP.pl perl编写的发包工具,简化版本curl,像curl致敬(唉,“致敬”都被于妈玩坏了). 该发包工具支持HEAD,GET,METHOD三种基本请求方法, ...
- spinner自定义,效果如腾讯QQ账号选择时候的下拉列表
下拉列表在android中自带spinner的有时候不太适合我们的界面,我们希望有自己的一种显示方法,那怎么办?自定义Spinner.效果如QQ账号选择一样.如图所以. 这种效果,如果你喜欢 ...
- ubuntu16.04彻底卸载mysql并且重新安装mysql
首先删除mysql: sudo apt-get remove mysql-* dpkg -l |grep ^rc|awk '{print $2}' |sudo xargs dpkg -P 清理完毕: ...