一、把小图放在一张大图中,先排版好。上几张图看看,就比如这个:

谷歌:

淘宝:

土豆右下角悬浮框:

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的详细使用步骤的更多相关文章

  1. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. CSS Sprites+CSS3 Icon Font

    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...

  3. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  4. 【转】CSS Sprites教程大全(使用方法、工具介绍)

    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...

  5. dataURI V.S. CSS Sprites 移动端

    英文原文:http://www.mobify.com/blog/css-sprites-vs-data-uris-which-is-faster-on-mobile/ 中文翻译:http://www. ...

  6. boi剖析 - 基于webpack的css sprites实现方案

    本文是58到家前端工程化集成解决方案boi的博文系列之一.boi是基于webpack打造的一站式前端工程化解决方案,现已开源Github. 作为前端构建工具不可或缺的一个环节,自动生成css spri ...

  7. CSS Sprites ——雪碧图的使用方法

    首先解释下CSS Sprites是什么:有称CSS精灵,有称CSS雪碧的,无论叫什么,他的作用就是把网页上很多小图标放到一张图片里面,然后通过CSS里面的background-position来控制每 ...

  8. CSS Sprites的概念、原理、适用范围和优缺点

    CSS Sprites概念 CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

  9. 什么是css sprites,如何使用?

    css sprites:精灵图(雪碧图):把一堆小图片整合在一张大图上,通过背景图片相关设置(背景图片.背景图是否重复.背景图定位),显示图片,减轻服务器对图片的请求数量 优点: 1.减少网页的HTT ...

随机推荐

  1. juery mobile select下来菜单选项提交form问题

    注意: data-native-menu="false"  虽然具有渲染作用,但是无法进行js提交. <script type="text/javascript&q ...

  2. 在后台代码中引入XAML的方法

    本文将介绍三种方法用于在后台代码中动态加载XAML,其中有两种方法是加载已存在的XAML文件,一种方法是将包含XAML代码的字符串转换为WPF的对象. 一.在资源字典中载入项目内嵌资源中的XAML文件 ...

  3. std::copy的使用

    看到有人在用std::copy这个东西,很简洁和爽啊,,所以找些帖子学习学习 http://blog.sina.com.cn/s/blog_8655aeca0100t6qe.html https:// ...

  4. CALayer -- 备忘

    CALayer layer是层,每个view上都会最少有一个layer,view上的可视化内容其实都是层. CALayer展示实例 let customView = UIView(frame: CGR ...

  5. share my tools With Xcode

    1.让Xcode的控制台支持LLDB类型的打印 在Xcode断点调试的时候, 在控制台输入 po self.view.frame 或者 po id 类型的时候就死翘翘了. 进入正题: 安装LLDB调试 ...

  6. UIStackView 简单使用

    UIStackView提供了一个高效的接口用于平铺一行或一列的视图组合.对于嵌入到StackView的视图,你不用再添加自动布局的约束了.Stack View管理这些子视图的布局,并帮你自动布局约束. ...

  7. MOSFET管应用总结

    /* *本文转载自互联网,仅供个人学习之用,请勿用于商业用途. */ 在使用MOS管设计开关电源或者马达驱动电路的时候,大部分人都会考虑MOS的导通电阻,最大电压等,最大电流等,也有很多人仅仅考虑这些 ...

  8. 第 13 章 装饰模式【Decorator Pattern】

    以下内容出自:<<24种设计模式介绍与6大设计原则>> Ladies and gentlemen,May I get your attention,Please?,Now I’ ...

  9. Metasploit渗透测试魔鬼训练营

    首本中文原创Metasploit渗透测试著作,国内信息安全领域布道者和资深Metasploit渗透测试专家领衔撰写,极具权威性.以实践为导向,既详细讲解了Metasploit渗透测试的技术.流程.方法 ...

  10. uva 12097 - Pie

    简单题,二分就行: #include<cstdio> #include<cmath> #define pi acos(-1.0) #define eps 0.000001 #d ...