网页设计中的图像放在所指定的背景颜色之上,如果完全平铺GIF、JPEG或其他不透明的图像类型,图像在背景颜色之上并不会造成任何不同,因为完全平铺的图像会填满文档背景,可以这么说,没有地方能让颜色“透出来",不过对于有alpha通道的图像格式,如PNG,可能会部分或完全透明,这会导致网站建设上图像与背景色结合。另外,如果出于某种原因无法加载图像,用户代理就会使用指定的背景色取代图像。考虑一下,对于一个本该“布满星星的段落”,如果无法加载背景图像,它将如何显示,如图9-16所示。
图9-16:没有背景图像的后果
图9-16展示了为什么使用背景图像的同时最好再指定一个背景色,这往往是一个好主意,这样一来,至少能为网页设计者保证得到一个清晰的结果:
p.starry{background-image:url(http://www.site.web/pix/stars.gif);
background-color:black;color:white;}a.grid{background-image:url(smallgrid.gif);}
<p class="starry">It's the end of autumn,which means the stars will be brighter than ever!<a href="join.html" class="grid">Join us</a>for a fabulous evening of planets,stars,nebulae,and more...
如果出于某种原因无法加载“星星”图像,这就会填入一个全黑的背景。另外,如果网页设计者不希望图像完全覆盖文档的背景,可能需要某种颜色覆盖背景中未被图像盖住的部分。