精通 CSS - 高级 Web 标准解决方案 4. 背景图像效果

4.1 背景图像基础

css

body {
    background-image: url(/img/pattern.gif);
    background-repeat: repeat;
    background-position: left center;
}

默认情况下，浏览器水平和垂直的重复显示背景图像，让图像平铺在整个页面上。

background-repeat 指定平铺的方式：垂直平铺（repeat-y）、水平平铺（repeat-x）或者不平铺（no-repeat）。

background-position 指定图像的位置。其值除了关键字之外还可以指定为像素或百分比。不可将像素和百分比混用。

css

h1 {
    background-position: 20px 30px;
    background-position: 0% 50%;
}

为了方便，CSS 还提供了 background 的简写版本。

css

h1 {
    background: #ccc url(/img/bullet.gif) no-repeat left center;
}

4.2 圆角框

固定宽度的圆角框

创建两个带圆角的图形，分别用于框的顶部和底部。

css

.box {
    width: 418px;
    background: #effce7 url(/img/bottom.gif) no-repeat left bottom;
}
.box .top {
    width: 418px;
    background: url(/img/top.gif) no-repeat left top;
}

上述方法仅适用于单色且没有边框的情况。
如果是实现边框的效果则需要在 header 和 footer 的中间再定义一个纵向重复的背景图片，随着高度的变更而自动铺满。

如果想实现圆角不会被框体的宽度或高度所影响，则至少需要将背景分割成 4 个图片（top-left、top-right、bottom-left 和 bottom-right）。

山顶角（mountaintop corner）

使用曲线形的位图角蒙板（角区域是透明的），盖住正在使用的背景颜色。
如果需要修改圆角的毕竟色，只需修改框体的背景色即可。

多个背景图像

上面几种用到多个背景图片来实现圆角框效果的方法，大多都必须在代码中添加非语义性的标记。需要这些多余的标记只因为在一个元素中只能添加一个背景图像。

在 CSS 3 中已经可以实现一个元素添加多个背景图像，并分别定位。

css

.box {
    background-image: url(/img/top-left.gif),
        url(/img/top-right.gif),
        url(/img/bottom-left.gif),
        url(/img/bottom-right.gif);
    background-repeat: no-repeat,
        no-repeat,
        no-repeat,
        no-repeat;
    background-position: top left,
        top right,
        bottom left,
        bottom right;
}

`border-radius`

使用 CSS 直接绘制圆角框。需要使用 CSS 3 的 border-radius 属性。

css

.box {
    border-redius: 1em;
}

`border-image`

这个新属性允许指定一个图像作为元素的边框。优点是可以根据一些简单的百分比规则把图像划分为 9 个单独的部分，浏览器会自动地使用适当的部分作为边框的对应部分。
这种方法称之为 九分法缩放（nine-slice scaling），它有助于避免在调整圆角框大小时通常会出现的失真。

css

.box {
    -webkit-border-image: url(images/css/border-image.jpg) 20% 20% 20% 20% / 50px round round;
}

4.3 投影

投影可以增加深度，形成立体感。

使用背景图片实现投影

使用一个有投影效果的背景图片来实现投影效果。

通过外边距设置为负值来偏移投影背景图片。

css

.img-wrapper {
    background: url(/img/shadow.gif) no-repeat bottom right;
    clear: right;
    float: left;
    margin: -5px 5px 5px -5px;
}

通过相对定位来偏移图片。

css

.img-wrapper {
    background: url(/img/shadow.gif) no-repeat bottom right;
    float: left;
    line-height: 0;
}

.img-wrapper img {
    background: #fff;
    padding: 4px;
    border: 1px solid #a9a9a9;
    position: relative;
    left: -5px;
    top: -5px;
}

使用 CSS 3 的 `box-shadow` 属性

设个属性需要 4 个值：垂直和水平偏移、投影的宽度（也就是模糊程度）和颜色。

css

img {
    /* 投影偏移 3 像素、宽度为 6 像素、颜色为中等灰色 */
    box-shadow: 3px 3px 6px #666;
}

Safari 和 Firefox 下需要使用扩展。

css

img {
    -webkit-box-shadow: 3px 3px 6px #666;
    -moz-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
}

box-shadow 还可以与 border-radius 配合创建圆角投影。

4.4 不透明度

4.4.1 CSS 不透明度

使用 opacity 实现透明效果，值为 0 ~ 1，值越小透明度越高。

css

.alert {
    background-color: #000;
    border-radius: 2em;
    opacity: 0.8;
    /* IE 老版本不支持 opacity 属性 */
    filter: alpha(opacity=80); /* proprietary IE code */
}

使用 opacity 会导致该透明框体上的文字也会一起变得透明，难以辨认。

4.4.2 RGBa

RGBa 是一种同时设置颜色和不透明度的机制。RGB 代表红色、绿色和蓝色， a 代表 alpha 透明度。
可以实现仅背景色透明，文字不透明的效果。

css

.alert {
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 2em;
}

4.4.3 PNG 透明度

PNG 文件格式最大的优点之一是它支持 alpha 透明度。使用 PNG 文件作为背景即可实现透明效果。
IE 6 不直接支持 PNG 透明度，需要额外代码才能支持。

4.5 图像替换

当文本不能满足要求（比如使用特定的字体）时，还是需要使用文本的图像。
由于不愿意将这些图像直接嵌入页面中，CSS 作者发明了 图像替换（image replacement） 的概念。
你可以像平常一样将文本添加到文档中，然后使用 CSS 隐藏文本并在它的位置上显示一个背景图像。
但是一些比较流行的图片替换方法会导致屏幕阅读器（将屏幕现实内容转换为声音或者布莱叶盲文显示的软件）无效。

4.5.1 FIR（Fahrner 图像替换）

html

<h2>
    <span>Hello World</span>
</h2>

css

/* 将 h2 标题的内容替换为背景图片 */
h2 {
    background: url(hello_world.gif) no-repeat;
    width: 150px;
    height: 35px;
}
/* 隐藏 span 的内容 */
span {
    display: none;
}

许多流行的屏幕阅读器会忽略那些 display 值为 none 或 visibility 为 hidden 的元素。因此会完全忽略这个文本，造成严重的可访问性问题。
因此，最好不要使用这种技术。

4.5.2 Phark

html

<h2>
    Hello World
</h2>

Phark 方法不使用 display 来隐藏文本，而是使用非常大的负值文本缩进。

css

h2 {
    background: url(hello_world.gif) no-repeat;
    width: 150px;
    height: 35px;
}

这种方法很好的解决了屏幕阅读器的问题。但是在关闭图像且打开 CSS 的情况下是无效的。

4.5.3 sIFR

图像替换试图解决的主要问题之一是在大多数计算机上缺少可用的字体。为了避免将文本转换成文本的图像，Mike Davidson 和 Shaun Inman 一起发明了一种使用 Flash 替换文本的方法 IFR（Inman Flash 替换）。

Flash 允许将字体嵌入 SWF 文件。使用 JavaScript 搜索文档，找到特定元素或者具有特定类名的元素中所有文本。然后 JavaScript 将文本替换为一个小的 Flash 文件。

Mike Davidson 对这个方法进行了扩展，创建了 sIFR（可伸缩 Inman Flash 替换）方法。这个方法可使多行文本替换和改变文本字号。

这些技术的主要问题涉及加载时间。页面必须完全加载，然后 JavaScript 才能替换文本。因此页面常常会有短暂的闪烁。

网站嵌入字体

可以把缺少的字体嵌入到网站，已解决客户端缺少字体的问题。
使用方法见这里。

附 1. 引用

《精通 CSS - 高级 Web 标准解决方案（第 2 版）》 - Andy Budd, Simon Collison, Cameron Moll 著；陈剑瓯译。

精通 CSS - 高级 Web 标准解决方案 4. 背景图像效果 ​

4.1 背景图像基础 ​

4.2 圆角框 ​

固定宽度的圆角框 ​

山顶角（mountaintop corner） ​

多个背景图像 ​

border-radius ​

border-image ​

4.3 投影 ​

使用背景图片实现投影 ​

使用 CSS 3 的 box-shadow 属性 ​

4.4 不透明度 ​

4.4.1 CSS 不透明度 ​

4.4.2 RGBa ​

4.4.3 PNG 透明度 ​

4.5 图像替换 ​

4.5.1 FIR（Fahrner 图像替换） ​

4.5.2 Phark ​

4.5.3 sIFR ​

网站嵌入字体 ​

附 1. 引用 ​