`
xiaoluode
  • 浏览: 14648 次
  • 来自: 深圳
社区版块
存档分类
最新评论

css sprites-简单实例

css sprites 
阅读更多

css sprites直译过来就是CSS精灵，但是这种翻译显然是不够的，其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。

下面我们来用一个实例来理解css sprites。

我们仅仅只需要制作一个扑克牌，拿黑桃10为例子。

可以直接把蓝色理想中融合好的一幅大图作为背景，这也是css sprites的一个中心思想，就是把多个图片融进一个图里面。

这就是融合后的图，相信对PS熟悉的同学应该很容易的理解，通过PS我们就可以组合多个图为一个图。

现在我们书写html的结构：

<div class="card">
   <div class="front">
  <b class="N1 n10"></b>
  <em class="First small_up1"></em>
  <span class="A1 up1"></span>
  <span class="A2 up1"></span>
  <span class="A3 down1"></span>
  <span class="A4 down1"></span>
  <span class="B1 up1"></span>
  <span class="B2 down1"></span>
  <span class="C1 up1"></span>
  <span class="C2 up1"></span>
  <span class="C3 down1"></span>
  <span class="C4 down1"></span>
  <em class="Last small_down1"></em>
  <b class="N2 n10_h"></b> 
   </div>
</div>

 

在这里我们来分析强调几点:

一：card为这个黑桃十的盒子或者说快，对div了解的同学应该很清楚这点。

二：我用span,b,em三种标签分别代表三种不同类型的图片，span用来表标中间的图片，b用来表示数定，em用来表示数字下面的小图标。

三：class里面的声明有2种，一个用来定位黑桃10中间的图片的位置，一个用来定义方向（朝上，朝下）。

上面是DIV基本概念，这还不是重点，不过对DIV不太清楚的同学可以了解。

下面我们重点谈下定义CSS：

span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}

这个是对span容器的CSS定义，其他属性就不说了，主要谈下如何从这个里面来理解css sprites。

背景图片，大家看地址就是最开始我们融合的一张大图，那么如何将这个大图中的指定位置显示出来呢？因为我们知道我们做的是黑桃10，这个大图其他的图像我们是不需要的，这就用到了css中的overflow:hidden;

 

但大家就奇怪了span的CSS定义里面没有overflow:hidden啊，别急，我们已经在定义card的CSS里面设置了（这是CSS里面的继承关系）：

.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}

 理解到这点还不够，还要知道width:125px;height:170px; 这个可以理解成是对这个背景图片的准确切割，当然其实并不是切割，而是把多余其他的部分给隐藏了，这就是overflow:hidden的妙用。

 

通过以上的部分的讲解，你一定可以充分的把握css sprites的运用，通过这个所谓的“切割”，然后再通过CSS的定位技术将这些图准确的分散到这个card里面去！

PS:CSS的定位技术，大家可以参考其他资料，例如相对定位和绝对定位，这里我们只能尝试用绝对定位。

 

最后我们来补充一点：

为什么要采取<span class="A1 up1"></span>这样的结构？

span这个容器是主要作用就是存放这张大的背景图片，并在里面实现”切割“，span里面切割后的背景是所有内容块里面通用的！

后面class为什么要声明2个属性？

很显然，一个是用来定位内容块的位置，一个是用来定义内容块中的图像的朝上和朝下，方位的！

下面我们附上黑桃10的完整源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作一幅扑克牌--黑桃10</title>
<style type="text/css"><!--
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}
/*小图片通用设置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow:hidden;}
/*数字通用设置*/
em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;overflow:hidden;}
/*各坐标点位置*/
.N1{left:1px;top:8px;}
.First{left:5px;top:20px;}
.A1{left:20px;top:20px;}
.A2{left:20px;top:57px;}
.A3{left:20px;top:94px;}
.A4{left:20px;top:131px;}
.B1{left:54px;top:38px;}
.B2{left:54px;top:117px;}
.C1{left:86px;top:20px;}
.C2{left:86px;top:57px;}
.C3{left:86px;top:94px;}
.C4{left:86px;top:131px;}
.Last{bottom:20px;right:0px;}
.N2{bottom:8px;right:5px;
}
/*大图标黑红梅方四种图片-上方向*/
.up1{background-position:0 1px;}/*黑桃*/
/*大图标黑红梅方四种图片-下方向*/
.down1{background-position:0 -19px;}/*黑桃*/
/*小图标黑红梅方四种图片-上方向*/
.small_up1{background-position:0 -40px;}/*黑桃*/
/*小图标黑红梅方四种图片-下方向*/
.small_down1{background-position:0 -51px;}/*黑桃*/
/*A~k数字图片-左上角*/
.n10{background-position:-191px 0px;left:-4px;width:21px;}
/*A~k数字图片-右下角*/
.n10_h{background-position:-191px -22px;right:3px;width:21px;}
/*A~k数字图片-左上角红色字*/
.n10_red{background-position:-191px 0px;}
/*A~k数字图片-右下角红色字*/
.n10_h_red{background-position:-191px -33px;}
-->
</style>
</head>
<body>
<!--10字符-->
<div class="card">
 <div class="front">
  <b class="N1 n10"></b>
  <em class="First small_up1"></em>
  <span class="A1 up1"></span>
  <span class="A2 up1"></span>
  <span class="A3 down1"></span>
  <span class="A4 down1"></span>
  
  <span class="B1 up1"></span>
  <span class="B2 down1"></span>
  
  <span class="C1 up1"></span>
  <span class="C2 up1"></span>
  <span class="C3 down1"></span>
  <span class="C4 down1"></span>
  <em class="Last small_down1"></em>
  <b class="N2 n10_h"></b> 
 </div>
</div>
</body>
</html>

 

分享到：
| css sprites介绍
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    CSS Sprites实例演示 代码

    **CSS精灵（CSS Sprites）**是一种网页图像优化技术，它允许我们将多个小图像合并到一个大图（称为精灵图）中，然后通过CSS的背景定位来显示我们需要的部分。这样可以减少网页HTTP请求的数量，从而提高页面加载速度...

    css Sprites小实例代码

    在上述提供的内容中，通过一个简单的实例展示了CSS Sprites的应用。实例中通过定义body、ul、li、a等元素的CSS样式来实现背景图片的切换显示。通过设置背景图片的url、高度、宽度以及不同状态下的background-...

    CSS彻底研究-书中实例

    在深入探讨"CSS彻底研究-书中实例"这个主题之前，我们首先要理解CSS（Cascading Style Sheets）的核心概念。CSS是一种样式表语言，用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档的呈现。它控制着网页的...

    CSS教程宝典－内含大量实例源代码

    学习如何减少重绘和回流、合理组织样式表、利用CSS Sprites和预加载等技巧，对于优化网站性能至关重要。 **8. 实例分析** 本教程宝典中的大量实例将帮助你实践所学知识。通过查看和分析源代码，你可以理解如何将...

    CSS-elementary-manual-.rar_Elementary

    - 通过实例学习如何创建简单的网页布局，如两列布局、三列布局。 - 学习如何利用CSS实现按钮、导航栏等常见网页元素的样式设计。 10. **调试与测试** - 使用开发者工具（如Chrome DevTools）进行CSS调试，查看...

    html-css-spotifyweb-源码.rar

    总之，"html-css-spotifyweb-源码.rar"提供了一个深入学习HTML和CSS实际应用的实例，尤其是对于想要掌握网页设计和前端开发的人员来说，这是一个很好的实践和参考材料。通过研究源码，我们可以了解到如何将理论知识...

    css3-doraemon.rar_html5_html5 css3_html5画哆啦a梦

    更值得一提的是，CSS3的渐变（gradients）、图案（patterns）和图片精灵（sprites）技术，使得哆啦A梦的色彩和纹理得以细腻呈现。比如，使用线性渐变（linear-gradient）可以制作出哆啦A梦的身体颜色过渡，而图案则...

    CSS Sprites简介以及优缺点

    **CSS Sprites 应用实例** 以淘宝网为例，我们可以看到在其频道页面导航和首页设计中，广泛运用了CSS Sprites技术。频道页面导航的sprites图包含了各个频道的图标，首页的sprites图则包含了各种按钮和装饰元素。...

    css网站的架构实例分析

    在“sinolog”实例中，可能通过合并多个CSS文件为一个、利用CSS Sprites减少图像请求，以及使用工具如Autoprefixer自动添加浏览器前缀，来提升加载速度。 七、语义化CSS命名 遵循语义化命名原则，如BEM（Block ...

    CSS学习资料及实例分析

    本资料包聚焦于CSS的学习，通过一系列从简单到复杂的实例，旨在帮助初学者逐步掌握CSS的核心概念和技术。 1. **基础概念** - **选择器与属性**：CSS中的选择器用于定位HTML元素，如id选择器(#id)，类选择器(.class...

    CSS实战手册实例

    9. **CSS优化技巧**：如减少选择器的复杂性，合理使用内联样式、内部样式表和外部样式表，以及利用CSS Sprites和数据URI等方法提升页面性能。 通过这些实例，你不仅可以学习到CSS的实际应用，还能培养解决问题的...

    《精通CSS+DIV网页样式与布局》书中实例

    8. **性能优化**：学习减少CSS文件大小、利用CSS Sprites、避免使用行内样式和!important等方法，以提升网页加载速度。 9. **浏览器兼容性**：理解各种浏览器对CSS特性的支持情况，学习如何编写兼容性良好的代码。 ...

    CSS禅意花园-源代码.rar

    其次，CSS禅意花园中的实例还可能涉及到CSS选择器的复杂应用，如伪类（`:hover`, `:active`, `:focus`）和伪元素（`:before`, `:after`），以及更高级的选择器如属性选择器、后代选择器和兄弟选择器。这些技术可以...

    css精灵图片例子.pdf

    ### 四、CSS Sprites实例教程 1. **素材准备**：将多个ico图标素材合并成一张大图。 2. **实现效果**：例如在一个列表中，每个项目前显示不同的图标。 3. **CSS代码**：使用`list-style-type:none`去除默认列表样式...

    css sprite简单实例

    css sprite直译过来就是CSS精灵。...这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用csssprites降低图片数量，带来的将是速度的提升

    div+css 切图实例

    本实例将通过"div+css 切图"的实践，深入探讨如何高效地将设计稿转化为可交互的网页。 切图，即切片图，是指设计师完成设计后，根据网页元素的形状和大小，将其切割成多个图片，以便于前端开发者更好地实现视觉效果...

    CSS 特效赏析 实例

    本篇文章将深入探讨CSS特效的实例，旨在为读者提供灵感和实用技巧。 一、CSS布局技巧 1. Flexbox布局：Flexbox是CSS3引入的一种新的布局模式，适用于一维布局，如行或列。它可以轻松地实现元素的对齐、自适应大小...

    css sprite示例源码

    3. 利用工具：使用自动化工具（如SpriteGenerator、CSS Sprites Generator等）自动生成Sprite图和对应的CSS代码，提高工作效率。 五、响应式设计中的应用 在响应式设计中，CSS Sprite同样适用，但需注意适应不同...

    CSS精华实例参考

    本资源"CSS精华实例参考"集合了多种实用且高效的CSS技巧和实例，对于提升网页设计水平大有裨益。下面我们将深入探讨其中可能涵盖的关键知识点。 1. **选择器**：CSS选择器是定位HTML或XML元素的基础，包括类选择器...

Magicbox
Global site tag (gtag.js) - Google Analytics