第三章 背景图像和图像替换

在本章中，你将学习：

• 固定宽度和可变宽度的圆角框。
• 滑动门技术。
• 山顶角。
• CSS阴影。
• 用于 IE5.x 和更高版本的 PNG 透明度支持。
• 图像替换。

3.1 背景图像基础

平铺图像在某些情况下很有用。但是，在大多数情况下，希望在页面上添加不进行平铺的图像。例如，假设希望在网页的开头显示一个大的品牌图像，那么只需将图像直接添加到页面上，在许多情况下这样做就够了。但是，如果图像不包含信息，是纯装饰性的，那么可能希望图像从其余内容中分离出来。 实现的方法是在 HTML 中为这个图像创建一个 "钩子" ，然后使用 CSS 应用这个图像。在下面的示例中，我在标记中添加一个空的 div 并且给它设置 ID branding 。然后可以将这个 div 的尺寸设置为与品牌图像相同，作为背景应用图像并指定不进行平铺。

#branding {

width: 700px;

height: 200px;

background: url(/images/branding.gif) no-repeat;

}

还可以设置背景图像的位置。假设希望在站点的每个标题上添加一个符号，如图 3-1 所示。可以编写下面这样的代码：

h1 {

padding-left: 30px;

background: url(/images/bullet.gif) no-repeat left center;

}

最后两个关键字指出图像的位置。在这个示例中，图像定位在元素的左边并且垂直居中。除了使用关键字之外，还可以使用像素或百分数等单位设置背景图像的位置。

如果使用像素设置背景位置，那么图像左上角到元素左上角的距离为指定的像素数。所以，如果指定垂直和水平位置都是 20 像素，那么图像左上角出现在元素左上角下面 20 像素、左边 20像素的地方。

但是，使用百分数进行背景定位的工作方式不太一样。百分数定位并不对背景图像的左上角进行定位，而是使用图像上的一个对应点。所以，如果指定垂直和水平位置都是20%，那么实际上将图像上距离左上角 20% 的点定位到父元素上距离左上角 20% 的位置 (见图3-2)。

如果希望使用百分数而不是关键字实现前面的示例，那么要将垂直位置设置为 50% ，这会使符号图像垂直居中：

h1 {

padding-left: 30px;

background: url(/images/bullet.gif) no-repeat 0 50%;

}

规范指出，不要将像素或百分数等单位与关键字混合使用。这似乎是一个没有意义的规则，而且许多现代浏览器故意忽略了这个规则。但是，混合使用单位和关键字在某些浏览器上会导致错误，而且很可能使页面失效。因此，最好不要混合使用单位和关键字。

尽管背景图像是一个容易掌握的概念，但是它们构成了许多高级 CSS 技术的基础。

3.2 圆角框

对基于CSS的设计最初的批评意见之一是CSS太死板了，只能建立方框。为了解决这个问题，人们开始创建具有曲线的设计。圆角框很快成为最时髦的CSS技术之一。创建圆角框有好几种方法。每种方法各有优缺点，对这些方法的选择主要依赖于实际情况。

3.2.1 固定宽度的圆角框

最容易创建的是固定宽度的圆角框。它们只需要两个图像：一个图像用于框的顶部，另一个用于底部。例如，假设希望创建图 3-3 这样的框样式。

这个框的标记如下：
<div class="box">
<h2>Headline</h2>
<p>Content</p>
</div>
需要用图形软件创建两个图 3-4 这样的图像：一个图像用于框的顶部，另一个用于底部。这个示例以及本书中其他所有示例的代码和图像可以从 www.friendsofed.com下载。

然后，将顶部图像应用于标题元素，将底部图像应用于 div 框的底部。因为这个框样式是单色的，所以可以在 div 框上添加背景颜色，从而形成框的主体。
.box {
width: 418px;
background: #effce7 url(images/bottom.gif) no-repeat left bottom;
}
.box h2 {
background: url(images/top.gif) no-repeat left top;
}
我们不希望内容碰到框的边界，所以还需要在 div 中的元素上添加一些填充：
.box h2 {
padding: 10px 20px 0 20px;
}
.box p {
padding: 0 20px 10px 20px;
}
这个方法对于单色而且没有边框的简单框是有效的。但是，如果希望创建像图 3-5 这样更生动的样式，那怎么办？

实际上，可以使用相同的方式，但是这一次不在框上设置背景颜色，而是设置一个重复显示的背景图像。还需要将底部曲线图像应用到另一个元素上。在这个示例中，
我使用框中的最后一个段落元素：
.box {
width: 424px;
background: url(images/bg-tile.gif) repeat-y;
}
.box h2 {
background: url(images/bg-top.gif) no-repeat left top;
padding-top: 20px;
}
.box .last {
background: url(images/bg-bottom.gif) no-repeat left bottom;
padding-bottom: 20px;
}
.box h2, .box p {
padding-left: 20px;
padding-right: 20px;
}
<div class="box">
<h2>Headline</h2>
<p class="last">Content</p>
</div>
图3-6所示为生成的框。因为没有给这个框设置高度，所以它会随着文本尺寸的增加进行垂直扩展。

灵活的圆角框
如果加大字号，前面的示例都会垂直扩展。但是，它们不会水平扩展，因为框的宽度必须与顶部和底部的图像的宽度一致。如果希望创建灵活的框，那么需要采用略有不同的方法。不用单一图像组成顶部和底部曲线，而是用两个相互重叠的图像 (见图3-7)。

随着框尺寸的增加，大图像有更多的部分显露出来，这样就实现了框扩展的效果。这个方法有时候被成为 滑动门技术 (sliding doors technique) ，因为
一个图像在另一个图像上滑动，将它的一部分隐藏起来。这个方法需要更多的图像，所以必须在标记中添加两个额外的无语义元素。
<div class="box">
<div class="box-outer">
<div class="box-inner">
<h2>Headline</h2>
<p>Content</p>
</div>
</div>
</div>
这个方法需要四个图像: 两个顶部图像组成顶部曲线，两个底部图像组成底部曲线和框的主体 (见图 3-8)。因此，底部图像的高度必须与框的最大高度相同。
分别将这些图像命名为 top-left.gif、top-right.gif、bottom-left.gif 和 bottom-right.gif。

首先，将 bottom-left.gif 应用于主框 div，将 bottom-right.gif 应用与外边的 div 。接下来，将 top-left.gif 应用于内部 div，将top-right.gif应用于标题。
最后，添加一些填充以便在内容周围形成一点儿空白。
.box {
width: 20em;
background: #effce7 url(images/bottom-left.gif) no-repeat left bottom;
}
.box-outer {
background: url(images/bottom-right.gif) no-repeat right bottom;
padding-bottom: 5%;
}
.box-inner {
background: url(images/top-left.gif) no-repeat left top;
}
.box h2 {
background: url(images/top-right.gif) no-repeat right top;
padding-top: 5%;
}
.box h2, .box p {
padding-left: 5%;
padding-right: 5%;
}
在这个示例中，我以 em 为单位设置框的宽度，所以在浏览器中增加文本尺寸时框会伸展 (见图3-9)。当然，可以用百分数设置宽度，这使框根据浏览器窗口的尺寸进行扩展或收缩。这是弹性和灵活布局背后的主要原则之一，在本书后面会进一步讨论这些原则。

添加两个额外的无语义元素是不理想的。如果只有很少的几个框，那么这是可以容忍的。但是，如果用到圆角框的地方很多，那么可以使用 JavaScript (和 DOM)添加额外元素。关于这个主题的更多细节，请参考 http://tinyurl.com/82y81 上 456 Berea Street 的 Roger Johansson 所写的文章。

3.2.2 山顶角

山顶角 (mountaintop corner) 是一个简单但非常灵活的概念，是由 www.simplebits.com 的 Dan Cederholm 首创的，他是畅销书 Web Standards Solutions (friends of ED, 2004) 的作者。假设希望创建一系列具有不同颜色的圆角框。如果使用前面的方法，就必须为每种颜色方案创建不同的角图像。如果只有几个方案，那么这个方法也可以，但是，如果想让用户创建自己的颜色方案，那么该怎么办？可能必须在服务器上动态地创建角图像，这是非常复杂的。
幸运的是，有另一个办法。并不创建有颜色的角图像，而是创建曲线形的位图角蒙板 (见图3-10)。蒙板区域盖住背景颜色，而角区域实际上是透明的。当放在有颜色的框上时，它们形成曲线形框的效果 (见图 3-11)。

因为这些角蒙板是位图，所以对于小曲线效果最好。如果使用大曲线，那么它会出现锯齿，不好看。
基本的标记与前一个方法相似，它需要四个元素来应用四个角蒙板：
<div class="box">
<div></div>
</div>