可替换的图标
处理行内的装饰性圆点和图标时，作为代替硬编码的方式，我们可以继续使用CSS的background属性来把图标设置在文字左边。这个方法可以迅速的改变整个站点的look and feel——升级一个CSS文件从而立刻改变整个站点的页面。
代码和前面平铺范例很相似：h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #369;
padding-left: 30px;
background: url(icon.gif) no-repeat 0 50%;
}
这里，我们在左边留出了额外的空间（在那儿我们将显示一个图标），设为no-repeat，是为了让背景图片只显示一次（看图2-8）。我们把它放置在距离首部0点和距离顶部50%的位置上。
(点击查看原图)
图2-8：A： 带有图标的标题
轻松升级
设想这样一个情景来代替前面的例子，我们已经在一个包含100个文档的站点中用<img>标签编码了这些图标。这些图标匹配着整个站点各个的题目。几个星期后，站点的所有者决定更改这个站点的look and feel。新的图标和老的图标有着不同的规格。天哪！我们将需要回到所有的100个文档里面，去改变每一个<img>标签，来更新它的image路径。对于一个项目的预算，这额外所需的时间就会推迟原先的期限。时间就是金钱。
把那些非必须的，装饰性的图片保持在CSS文件中，就可以使得更改背景图片只需几分钟，而不再需要几天，整个站点可以立刻得到升级。你应该开始明白把结构层和表现层的标记分离开的力量了吧。
可变换的效果
下面的技巧在某些情况下会很有用。这是我在2003年4月，用标准重构Fast Company magazine（www.fastcompany.com）站点时大量采用的方法。
我们在整个站点的大多数<h3>标题中使用了13*13点的小图标，就象这样：<h3><img src="http://images.fastcompany.com/icon/first_imp.gif" width="13" height="13" alt="*" /> FIRST IMPRESSION</h3>
我们用这种方法编码有两个原因。一个原因是，有各种各样的图标，它取决于标题的主题（读书俱乐部的一本书，引号标记着每天的引用，等等）。第二个原因是，当时，我们每个月都会根据当前发行的杂志封面来更换整个站点的配色方案。这种更换要成为可能，当然要用CSS。
要让这些图标随着页面上其它元素一起变换颜色，并不需要每次都创建新的图标。我们创建一个仅使用两种色彩的图标：白色和透明色（变换的色彩将被透出来）。图2-9显示了这些图标中的一个例子，它们被使用在首页上的每日引言中。
图2-9：A 13×13 点大小的透明图标
透过图标中透明的部分，我们再次使用简便的CSS中background属性设置想让它透出来的颜色。另外我们还想让色彩仅仅出现在图标的后面，而不影响到标题的文字，因此我们又用下面的方法将规则仅施加于包含在<h3>内的<img>标签。h3 img {
background: #696;
}
前面的代码确定了所有包含在<h3>内的<img>标签都有一个绿色的背景。色彩透过图片的透明部分显示出来，而白色的部分仍然保持白色。每个月，我们都能用一个不同的色彩值来升级CSS规则，从而改变整个站点中的每个标题以及相关联的图标的色彩。这就象变魔术！
对齐<img>标签
为了让图标和文本正确的排齐（我们想让它垂直居中），我们加入了以下CSS规则：h3 img {
background: #696;
vertical-align: middle;
}
这样保证了包含于<h3>标签中的图片对齐于它的文本中点。图2-10显示了标题的效果。
图2-10： 应用CSS背景的透明图片的效果
这个方法还有另一个值得注意的地方——不但可以用一个单独CSS代码块来指定图片背后要显示出的背景颜色，同样也可以在CSS代码块的内部指定。
举个例子，让我们回到前面“可替换的图标”例子，增加一些背景色彩：h1 {
font-family: Arial, sans-serif;
font-size: 24px;
color: #fff;
padding-left: 30px;
background: #696 url(transparent_icon.gif) no-repeat 0 50%;
}
transparent_icon.gif将放置在我们在前面所指定的色彩上面，用的是同样的规则（看图2-11）——这里是#696，一个可爱的绿色。
(点击查看原图)
图2-11：带有背景图片和色彩的标题
这个技巧使得放置一些与页面色彩相关联的小圆角或者装饰性的图片变得特别的方便。这些非必须的图片被完全的包含在CSS文件中，如果将来要升级，那将可以非常容易的改换。请保留地址 http://www.qqread.com/css/d972369002.html进入讨论组讨论。
相关专题
- CSS 菜单举一反三 (0次浏览)
- CSS Image Maps—图像地图 (0次浏览)
- CSS 全攻略(希望斑竹加精) (0次浏览)
- 7。1sp1风格制作之css解析 (0次浏览)
- HTML和CSS在Flash中的应用 (0次浏览)
- 通过Dreamweaver学习了解CSS (0次浏览)
- CSS实现文本渐变效果 (0次浏览)
- CSS Hack整理 (0次浏览)
- Photoshop做简单的xhtml+css网页 (0次浏览)
- 面向对象的XHTML与CSS编程 (0次浏览)
