第十二章用CSS设置背景颜色与图像

1.设置背景颜色

用background-color属性来设置标题或段落的背景颜色，用color来设置字体的颜色。

2.设置背景图像

用background-image来插入背景图像。

3.设置背景图像平铺

在默认情况下，如果图像的长宽不够，它会自动向水平和竖直两个方向平铺。如果不希望平铺，或者希望按着一个方向平铺，可以使用background-repeat属性来控制。该属性有四种值：

• repeat： 沿水平和竖直两个方向平铺，即只显示一次。

• no-repeat： 不平铺，只显示一次。

• repeat-x： 只沿水平方向平铺

• repeat-y： 只沿竖直方向平铺

如果想让背景图片沿着水平方向平铺，示例如下：

效果如下：

另外，背景属性可以简化成如下的形式：

4.设置背景图像位置

通过background-position来设置位置。

它可以设置两种值：

1）第1个值用于设定水平方向的位置：”left”、”center”或”right”

2）第2个值用于设定竖直方向的位置：”top”、”center”或”bottom”

 

此外，还可以用具体数值来确定图像的位置。

另外还可以用**百分数
**

5.设置背景图片位置固定

用background-attachment把背景设置成固定不变的效果，使背景固定，不随内容一起滚动。

6.设置标题的图像变换

对于标题文字，如果只用系统所拥有的几种基本文字，对于网页美观性会非常不利。因此，很多网页用图像代替文本显示。

但是这又不利于搜索引擎理解和收录网站。

因此一些CSS设计师发明了一种”图像替换”的方法来解决这个问题。其核心思想是让标题文字和图像同时存在，但是隐藏文字。

这种方式主要是利用span对象中的display：none来取消文字的显示

7.使用滑动门技术的标题

为了让标题的背景图片从中间缩放，保留两边的花纹。我们可以设置两个背景图片，让它们向中间收缩，这就是”滑动门”

然后在h3中添加wide和narrow类，修改它们的宽度

即可实现标题背景收缩的效果

注意，不能把宽度设置得太宽或太窄，这样会出现错误。