【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 ...
随机推荐
- python基础--接口与归一化设计、封装、异常、网络编程
1 接口与归一化设计 1.1 归一化概念: 归一化的好处: 1.归一化让使用者无需关心对象的类是什么,只需要知道这些对象都具备某些功能就可以了,这极大降低了使用者的使用难度. 2.归一化使得高层的外部 ...
- 计算标准差 Exercise07_11
import java.util.Scanner; /** * @author 冰樱梦 * 时间:2018年下半年 * 题目:计算标准差 * */ public class Exercise07_11 ...
- [BZOJ1002](FJOI 2007) 轮状病毒
[题目描述] 给定n(N<=100),编程计算有多少个不同的n轮状病毒. [输入格式] 第一行有1个正整数n. [输出格式] 将编程计算出的不同的n轮状病毒数输出 [样例输入] 3 [样例输出] ...
- pycharm直接连接mysql数据库
1.找到view---Tool windows -- Database 2.连接 3.输入地址,账号,密码 4.如果不能使用证明少安装了插件 点击直接安装插件 5.这样就直接能在pycharm中点击刷 ...
- 内核创建的用户进程printf不能输出一问的研究
转:http://www.360doc.com/content/09/0315/10/26398_2812414.shtml 一:前言上个星期同事无意间说起,在用核中创建的用户空间进程中,使用prin ...
- DN安卓2014版(5-9)
DN安卓2014版(5-9) 联系2g32@sina.com
- spring webflow
最近看了一段时间的spring-webflow,说一下自己的见解吧. 首先说一下关于spring-webflow的技术文档太少了,网上就只有一个入门篇,讲的比较笼统,但还是推荐一下, Spring W ...
- JS的jsoneditor,用来操作Json格式的界面;json-editor用来根据json数据生成界面
1.jsoneditor https://github.com/josdejong/jsoneditor https://jsoneditoronline.org/ 效果如下: 2.json-edit ...
- flask上传文件时request.files为空的解决办法
在做上传文件的时候遇到request.files是空 原因在于html中的表单form没有指明 enctype="multipart/form-data" <form met ...
- Google Python 命名规范
Google Python命名规范 module_name, 模块 package_name, 包 ClassName, 类 method_name, 方法 ExceptionName, ...