1.5 多彩文案稿——网页背景

在本章综述了网页文本的使用之后，将会发现文本的表现效果还比较单调，此时可通过对文本定义背景颜色、应用背景图像等操作，快速转变文本的表现效果。

1.5.1 文本的背景颜色

在设计网页时，网页文本的背景颜色是以文本当前所在对象的背景颜色为基础的。例如文本直接在网页中，文本的背景颜色以网页背景颜色为依据；如果文本是在表格的单元格中，则文本的背景颜色将以表格单元格背景颜色为依据。

当然，除了依赖文本所在对象的背景颜色为自身背景颜色外，还可以对文本进行单独定义背景颜色。同样，此时还将使用CSS进行定义。

01 如图1-36所示，新建一个网页“index.html”，并在Dreamweaver文档窗口中打开。

02 打开【CSS样式】面板，单击面板底部的【新建CSS规则】按钮。

03 弹出【新建CSS规则】对话框：

ⅰ.在【选择器类型】中选择“类（可应用于任何标签）”单选按钮。

ⅱ.在【名称】中输入“txtbg”表示设置文本背景。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

04 单击【确定】按钮进行该自定义样式的具体设置。

01 如图1-37所示，在打开的【.txtbg的CSS规则定义】对话框的【分类】列表中选择“背景”选项。

02 在对话框右侧单击【背景颜色】拾取器，在色盘上选择颜色为“#3333CC”。这就表示了设置当前自定义样式的背景颜色为十六进制是“#3333CC”的蓝色。

03 此外，还可以继续定义文本的颜色。如图1-38所示，在【分类】列表中选择“类型”选项，选项单击右侧【颜色】拾取器，在弹出的色盘中选择“#FFFFFF”白色。

04 定义了文本的颜色以及背景色后，单击【确定】按钮完成该样式的设定。

01 如图1-39所示，在网页文档中输入文本“这里有一段蓝色背景白色文字的文本”。

02 选择该段文本中的“蓝色背景白色文字”，打开【属性】面板，在【样式】下拉列表框中选择样式“txtbg”。

03 保存网页文件，按【F12】键查看预览效果，“蓝色背景白色文字”如实展示了背景色和前景色。

1.5.2 文本的背景图像

在网页应用中，除了可以对文本定义背景颜色以外，还可以对文本的背景图像进行定义以获得更好的视觉效果。

首先，准备一张图像文件，该图像文件与网页文件最好能保持在同一站点之下的关系。如图1-40所示，网页文件“index.html”即与图像文件“line.gif”在同一文件夹内，并将它们建立一个Dreamweaver站点便于本节操作讲解所用（文件路径为：光盘“\Pages\Part1\1-5\”文件夹）。

在图1-40所示的图像“line.gif”预览中可以看出，其是由一段虚线组成的图形，在应用的文本中可以用作文本底部的虚线，形成类似于在信件稿纸写字的效果。那么如果实现这样的要求呢？

01 在文档窗口中打开网页文件“index.html”。

02 打开【CSS样式】面板，单击面板底部的【新建CSS规则】按钮。

03 弹出【新建CSS规则】对话框，如图1-41所示：

ⅰ.在【选择器类型】中选择“类（可应用于任何标签）”单选按钮。

ⅱ.在【名称】中输入“bgimg”表示设置背景图像。

ⅲ.在【定义在】中选择“仅对该文档”单选按钮。

04 单击【确定】按钮进行该自定义样式的具体设置。

01 如图1-42所示，在打开的【.bgimg的CSS规则定义】对话框中，选择【分类】列表中的“背景”选项。

02 通过单击【背景图像】后的【浏览】按钮选取获得“背景图像”，即“line.gif”。

03 在【重复】下拉列表框中选择“横向重复”，表示当前的“line.gif”在横向上可以任意次的重复显示，这样就可以拼凑成无缝任意长的虚线背景。

04 在【垂直位置】下拉列表框中选择“底部”。

05 单击【确定】按钮即可完成对该CSS样式的定义。

01 如图1-43所示，在文档中输入“一个段落内强制换行的三段文本”。

02 依次选择每段文本，打开【属性】面板，在【样式】下拉列表框中选择刚定义的“bgimg”样式。

03 设置完成后，保存网页并按【F12】键进行预览。此时即可看到每段文本的底部均出现了虚线的背景图像，并且背景图像的横向长度是随着应用了样式的文本的长度变化而变化的。

注：关于本小节介绍的CSS【背景】的使用，不仅仅是针对文本，在本章下面要介绍的各类元素，诸如图像、多媒体，甚至是整个网页均可应用该样式，表现出样式定义了的视觉效果。