可变换的效果

 

下面的技巧在某些情况下会很有用。这是我在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文件中，如果将来要升级，那将可以非常容易的改换。