图8-3
这不是一个关于背景图像的优秀示例，但是它演示了背景图像的工作原理。该示例中存在的问题是，背景图像中使用的颜色和它上方显示的文本之间的颜色对比度太低，以至于难以阅读文本。
必须确保背景图像和它上方显示的文本之间具有足够的对比度；否则用户阅读文本时将存在困难。此外，低对比度的图像（由相似颜色组成的图像）通常是较好的背景图像，因为寻找一种在高对比度图像之上具有很好可读性的颜色较为困难。
图8-4给出了该背景图像的改进示例，其中的文本位于单色上方，这使得文本能够更容易阅读。这一次还使用了一幅更大的图像(ch08_eg03b.html)。
图8-4
您可能已经注意到，没有方法可用于表达背景图像的预期宽度和高度，并且background-image特性不具有alt属性（由于各种原因无法看到图像时显示的备选文本）；因此，背景图像不能用于传送任何重要信息，因为对于看不到背景图像的访问者来说，图像上的信息是不可访问的。
在使用大图像文件作为背景图像时需要非常谨慎，因为加载大文件的速度可能非常慢。图像的文件越大（即字节数越大），则加载和显示它的时间越长。
background-image特性可以很好地作用于大多数块级元素，但是某些较老的浏览器在
显示表中的背景图像时会存在问题。
8.2.3 background-repeat特性
默认情况下，background-image特性会多次重复以布满整个页面，创建一种称为墙纸的效果。墙纸由一幅多次重复的图像组成，：并且看不到它的边缘（如果图像经过良好设计）。因此，重要的是任何模式都应当是可镶嵌的或者能够很好地结合在一起。墙纸通常由一些纹理组成，例如纸张、大理石花纹或者抽象的表面，而不是照片或稽徽标。
如果不希望图像在页面背景中多次重复，可以使用background-repeat特性，该特性有4个可选用的值，如表8-3所示。
表8-3
值
repeat repeat-x repeat-y no-repeat
图像多次重复以覆盖整个页面。
图像将在页面水平方向多次重复（但在垂直方向不重复） 图像将在页面垂直方向多次重复（但在水平方向不重复） 图像将仅显示一次
目 的
具有不同值的特性能够带来各种令人感兴趣的效果，因此值得依次查看。前面已经给出repeat值的效果，下面查看repeat-x值的效果，该值沿着浏览器的x轴创建一条水平栏(ch08_eg04.css) :
body {
background-image: url(\ background-repeat: repeat-x; background-color: #ffffff;}
在图8-5中可以看到使用这个特性后的效果。
图8-5
repeat-y值的工作原理与repeat-x值相同，但作用方向不同：它沿着浏览器y轴方向创建垂直栏(ch08_eg05.css)：
body {
background-image: url(\ background-repeat: repeat-y;
background-color: #ffffff;}
在图8-6中可以看到结果，该结果由左边向下的边栏组成。
图8-6
最后一个值是no-repeat，默认情况下它仅在浏览器窗口的左上角显示图像的一个实例(ch08_eg06.css) :
body {
background-image: url(\ background-repeat: no-repeat; background-color: #eaeaea;}
图8-7中给出了结果；注意，页面的背景色被设置为与图像中所使用的颜色相同。
图8-7
8.2.4 background-position特性（用于固定背景的位置）
当background-color特性的值与图像的背景色相同时，无法看到图像的边缘，如图8-7所示。但是，您可能希望修改这幅图像的位置，此时可以使用background-position特性，该特性可采用表8-4中所示的值。
表8-4
值
x% y% xy
意 义
沿着X轴（水平）和y轴（垂直）的百分比 沿着X轴（水平）和y轴（垂直）的绝对长度
left center right top bottom
在页面或者包含元素的左边显示 在页面或者包含元素的中间显示 在页面或者包含元素的右边显示 在页面或者包含元素的顶部显示 在页面或者包含元素的底部显示
下面的示例固定图像的位置，如图8-8所示(ch08_eg07.css): body {
background-image: url(\ background-position: 50% 20%; background-repeat: no-repeat; background-color: #eaeaea; }
图8-8
这幅图像将水平方向居中（因为它被设置为距离页面左侧5096的屏幕宽度），并且垂直方向距离屏幕顶端向下1/5处（因为它被定位为距离屏幕顶部20%的窗口高度）。
8.2.5 background-attachment特性（用于水印）
background-attachment特性可用于指定称为水印的图像。这种设置的关键区别是，即使用户向上或向下滚动页面或者滚动页面中的所有其他元素，背景图像都将停留在相同的位置。background-attachment特性可以采用两个值，如表8-5所示。
值
fixed scroll
表8-5
目 的
用户向上或向下滚动页面时图像不会移动
图像停留在页面背景上的相同位置处。如果用户向上或向下滚动页面，则图像也随之移动
在下面的示例中，即使用户滚动页面，图像也停留在页面的中心位置(ch08_eg08.css): body {
background-image: url(\ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-color: #eaeaea; }
在图8-9中，用户已经向下滚动页面，但是图像仍然停留在窗口的中心位置。
相关推荐：
loading