CSS Sprites的详细使用步骤
一、把小图放在一张大图中，先排版好。上几张图看看，就比如这个：
谷歌：
淘宝：
土豆右下角悬浮框：
1、把用到的小图都放到了一张大图里，其中的小图之间的排版是有点规律的，比如说淘宝那张，类似的小图放置成同一列，这样就计算小图显示位置的时候，只要知道第一个小图的位置，同一列的小图，left（X坐标）一样，只需要改top（Y坐标）。这样就方便了许多。
二、使用大图。
在哪个位置需要使用这个小图，就把大图作为background-images插入。然后来根据这个小图的大小调整left 和top。
用到的css属性是background-image、background-position、background-repeat、这几个属性。
或者使用background这个复合属性写在一起就好。
三、我的第一个demo，我一定要实现这样的效果
我先上张图说明我要做什么:
这个例子的意义是让我明白要怎么去显示想要的小图，没有其他的意义了哈哈。
我的思路是，ul li内内嵌一个<div></div>（当然li是块级元素）。
详细的布局代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul.ul1
{
width:200px;
height:200px; }
ul.ul1 li
{
height:40px; }
.star
{
width:30px;
height:18px;
border:1px solid black;
display:inline-block; /*将对象呈递为内联对象，但是对象的内容作为块对象呈递*/ /*这里使用是为了div跟li能不使用float属性处在同一行，最后div和li对其是用到inline-block属性*/
vertical-align:top; background-image:url(images/minibar.png); /*显示小图*/
background-repeat:none;
background-position:2px -55px;
}
.num9
{
width:30px;
height:18px;
border:1px solid black;
display:inline-block;
vertical-align:top; background-image:url(images/minibar.png); /*显示小图*/
background-repeat:none;
background-position:-205px -20px;
}
</style>
</head>
<body>
<ul class="ul1">
<li>项目一<div class="star"></div></li>
<li>项目一<div class="num9"></div></li>
<li>项目一</li>
<li>项目一</li>
</ul>
</body>
</html>
小图完整出来了。
心得：
1、书写background-position时一般都是负值，因为是从大图的左上角作为（0,0）点。
2、之前没有学习css sprite之前，是想着怎么把一张大图不要的部分怎么遮挡掉。现在明白了是怎么回事。比如我上面要显示那朵小云，把大图放进div中，然后设置这个div的width和height，再定位一下background-position的位置。最后，大图就只在div中显示我们需要的一小部分。
3、我还要深入学习要怎么把小图排版好成一个大图，更容易测量位置，且不互相干扰。
三、为什么要使用CSS Sprites
减少HTTP请求次数，从而提高了网站性能。
因为假设有6个小图，就有6个HTTP请求，但是如果是放在一个大图里，就只需要1次，因为你要的6个小图都在一张大图里，请求一次后不用再次发送HTTP请求去请求图片资源。
CSS Sprites的详细使用步骤的更多相关文章
- CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- CSS Sprites+CSS3 Icon Font
CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
- CSS Sprites (CSS图像拼合技术)教程工具
什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...
- 【转】CSS Sprites教程大全（使用方法、工具介绍）
什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
- dataURI V.S. CSS Sprites 移动端
英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...
- boi剖析 - 基于webpack的css sprites实现方案
本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css spri ...
- CSS Sprites ——雪碧图的使用方法
首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...
- CSS Sprites的概念、原理、适用范围和优缺点
CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...
- 什么是css sprites，如何使用？
css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片.背景图是否重复.背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1.减少网页的HTT ...
随机推荐
- WPF DataGrid 自动生成行号的方法（通过修改RowHeaderTemplate的方式）
WPF中的DataGrid自动生成行号的方法有很多,这里记录了一种通过修改 RowHeaderTemplate的方式来生成行号: 方法一: xaml界面: <Window ... xmlns:l ...
- 预处理命令#define #undef #if #endif 的基本用法
C#的预处理命令其实还是蛮有用的,但是真正使用过得人不多,这个介绍一下平时用的比较多的预处理命令中的几个:#define,#undef ,#if,#endif.除此之外还有一些预处理命令#warnin ...
- leetcode第六题 ZigZag Conversion （java）
ZigZag Conversion The string "PAYPALISHIRING" is written in a zigzag pattern on a given nu ...
- [原博客] POI系列(5)
正规.严谨.精妙. -POI BZOJ 2213 : [Poi2011]Difference 如果我们每次枚举两个字母最大最小情况时,很容易想到写出代码里注释的样子.这样是26*26*n的,我们发现枚 ...
- Android 将文件保存到SD卡中
①写文件到sd卡中需要获得权限,在AndroidManifest.xml中添加如下权限: <uses-permission android:name="android.permissi ...
- POJ_2446_Chessboard
题目意思就是一个M*N的有洞棋盘棋盘上,用1*2的板子去覆盖没有洞的地方,要求板子不能重叠,最终能否将棋盘完整覆盖. 代码: #include<stdio.h> #include<s ...
- VC自动与Internet时间服务器同步更新
在VCKBASE.CSDN里挖了许久的坟,才找到一些有点用的资料,最后自己整理出这样的个函数,方面VC实现时间同步,多的不说,自己看源码,根据自己的需要可以适当修改源码: #include <W ...
- LREM key count value
LREM key count value Available since 1.0.0. Time complexity: O(N) where N is the length of the list. ...
- devi into python 笔记（二）元组 变量声明 和列表解析
元组tuple: 类似list,只是tuple是不可变的list.类似java的String都是不可改变的.注意:tuple没有方法(有待考证),不可以像list那样那个list.pop 或者list ...
- OracleParameter 的使用（参数名要以:开头，不允许包含@等特殊字符）[转]
在使用OracleParameters时,CommandText 中的参数要以":"开头,不能包含@等特殊字符.而在其它地方引用到此参数时可以不必加上":",程 ...