css sprites图片背景优化技术

转自：蓝色

扑克牌

介绍一种比较简单的实现方法，这种方法不用一张图片。
原理是：用四个特别字符的html标签来实现。
1. & spades;表示黑桃
2. & hearts;表示红心
3. & clubs;表示梅花
4. & 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>
再写样式：
<style type="text/css">
.card{125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{
display:block;
20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
/*小图片通用设置*/
/*数字通用设置*/
b{display:block;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{FILTERrogidXImageTransform.Microsoft.BasicImage(Rotation=2);height:1px}
.index {
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 14px;
 height:36px;
 position: absolute;
 left:5px;
 top:0px;
}
.end {
 font-size: 16px;
 font-weight: bold;
 text-align: center;
 14px;
 height:36px;
 position: absolute;
 right:5px;
 bottom:0px;
}
.red { color: #ff0000; }
.font{font-size:34px;}
</style>
注意：为了真实的还原一张扑克牌，我在第二张扑克牌中加入滤镜功能，让下面的图案垂直翻转，但这种方法会造成图片不清晰，并且这种方法只有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>
<style type="text/css">
.card{125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{
display:block;
20px;
height:30px;
line-height:30px;
position:absolute;
font-size:26px;
left: 22px;
top: 130px;
}
/*小图片通用设置*/
/*数字通用设置*/
b{display:block;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;
14px;
height:36px;
position: absolute;
left:5px;
top:0px;
}
.end {
font-size: 16px;
font-weight: bold;
text-align: center;
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>