css sprites把很多小图集成在一张图片上

互联网 发布时间：2009-04-02 19:36:39 作者：佚名

网页制作Webjx文章简介：在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图

在google中搜索一下css sprites这个名称，会查出很多信息，并且随着SEO越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上
不用图片的纯css实现方法
前面介绍了制作的扑克牌是用图片的方式来实现，它逼真地还原了扑克牌。下面介绍一种比较简单的实现方法，这种方法不用一张图片。
原理是：用四个特别字符的html标签来实现。

&spades;表示黑桃 &hearts;表示红心 &clubs;表示梅花 &diams;表示方块

先写结构：
<div class="card" style="left:10px;top:20px;">
<div class="front">
9 &spades;
&spades;
&spades;
&spades;
&spades;
&spades;
&spades;
&spades;
&spades;
&spades;
&spades; 9
</div>
</div>
再写样式：

注意：为了真实的还原一张扑克牌，我在第二张扑克牌中加入滤镜功能，让下面的图案垂直翻转，但这种方法会造成图片不清晰，并且这种方法只有IE系列的浏览器才能识别，如果高手们有其它更好的办法，请不吝赐教！
运行代码框
<!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>无标题文档</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;} /*中间图片通用设置*/ span{ display:block; width:20px; height:30px; line-height:30px; position:absolute; font-size:26px; left: 22px; top: 130px; } /*小图片通用设置*/ /*数字通用设置*/ b{display:block;width:15px;height:10px; position:absolute;font-size:10px;text-align:center;font-weight:bold;overflow:hidden;} /*各坐标点位置*/ .A1{left:21px;top:10px;} .A2{left:21px;top:50px;} .A3{left:21px;top:90px;} .A4{left:21px;top:130px;} .B1{left:51px;top:76px;} .C1{left:83px;top:10px;} .C2{left:83px;top:50px;} .C3{left:83px;top:90px;} .C4{left:83px;top:130px;} .scroll{FILTER:progid:DXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px} .index { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; left:5px; top:0px; } .end { font-size: 16px; font-weight: bold; text-align: center; width:14px; height:36px; position: absolute; right:5px; bottom:0px; } .red { color: #ff0000; } .font{font-size:34px;}</style> </head> <body>  <div class="card" style="left:10px;top:20px;"> <div class="front"> 9 ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ ♠ 9 </div> </div>  <div class="card" style="left:175px;top:20px;"> <div class="front red"> 9 ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ ♥ 9 </div> </div>  <div class="card" style="left:340px;top:20px;"> <div class="front red"> 9 ♣ ♣ ♣ ♣ ♣ ♣ ♣ ♣ ♣ ♣ 9 ♣ </div> </div>  <div class="card" style="left:510px;top:20px;"> <div class="front red"> 9 ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ ♦ 9 </div> </div> </body> </html>
[Ctrl A 全部选择提示：你可先修改部分代码，再按运行]

Tag：图片集成 class span /span DIV /div

CSS Sprites 样式生成工具 3.0
很高兴为大家带来了CSS Sprites 样式生成工具 3.0版本。保存的设置文件也同时更新了，支持打开旧的文件，会以新的格式保存（旧版本打不开）。操作界面做了小小的调整
2009-06-23
CSS Sprites简介以及优缺点
阿里妈妈UED谈CSS Sprites技术.
2009-10-20
使用CSS sprite 的好处和坏处分析
无处不在的 CSS sptites －为数不多的几个可以直接跳过”流行”这个过程，而可以马上并且牢牢地跻身于最佳 CSS 实践之中的几个技术之一。
2010-04-17
什么是CSS Sprites（图片合并）技术图文介绍
众所周知，减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中，然后再用CSS
2011-06-21
CSS Sprites详解
CSS Sprites技术不新鲜，早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传，后来出来个 14 Rules
2011-08-02
css sprites技术 CSS Sprites图片切割术与图片优化深入理解
近段时间一直在做前台的一些东西，涉及到很多div+css的问题,原来这个叫CSS Sprites技术,我对前台这些个东西比较感兴趣，所以会去了解多一点
2012-12-03
浅谈CSS Sprites切图技术
CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位
2014-12-12
CSS Sprite从大图中截取小图完整教程
这篇文章主要介绍了CSS Sprite从大图中截取小图完整教程的相关资料,需要的朋友可以参考下
2014-12-29

软件下载

源码下载

软件编程

网络编程

在线工具

数据库

CMS

常用工具

css sprites把很多小图集成在一张图片上

相关文章

最新评论

文章分类

大家感兴趣的内容

最近更新的内容