如何使元素具有不同的背景颜色,而背景图像却处处显示(又名水印)?

不幸的是,这是你想要的行为。 background-image 和 background-color 是的子属性 background #table2 和 #div2 ,你再也看不到“通过”页面背景了。

CSS3允许您使用 rgba() Firefox 3 and Safari/Webkit do )。要在IE中获得类似rgba()的效果,可以使用 filter: 规则如下:

#table2 {
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff80,endColorstr=#ffffff80); /* IE proprietary */
    background-color: rgba(255, 255, 255, 0.5); /* CSS3 standard */
}

注意 startColorstr 和 endColorstr 参数有第四个alpha值。

如果没有一些聪明的HTML/CSS技巧,就无法完成您想要做的事情。如果你设置了一个元素的背景色,它就不允许它下面的图像“渗透”。

http://www.quirksmode.org/css/opacity.html

但是,我相信(未测试)这也适用于元素内的任何文本,因此您可能需要第二个类将表内文本的不透明度设置回1,等等。

您正在为body元素设置背景图像。div和table是不透明的,它们位于body元素前面,这就是它们覆盖水印的原因。

如果要将水印单独应用于每个元素,应执行以下操作:

#table1, #table2, #table3, #div1, #div2, #div3 { 
    background: url(/images/shield-25.png) blue no-repeat center;
}

或许

table, div { 
    background: url(/images/shield-25.png) blue no-repeat center;
}