如何让元素具有不同的背景颜色但背景图像随处可见（又名水印）？答案

【问题标题】：How to have elements with different background-colors yet the background-image shows everywhere (aka, a watermark)?如何让元素具有不同的背景颜色但背景图像随处可见（又名水印）？
【发布时间】：2009-02-26 23:25:16
【问题描述】：

我想创建一个带有水印的 html 页面。我在身体上设置了背景图像。但是，我有一些元素不允许背景图像渗出。他们定义了自己的背景颜色（但不是背景图像），覆盖了正文中的颜色。这让我很惊讶。他们没有覆盖图像，只是颜色。

在具有不同背景颜色的元素的页面上添加可见水印似乎是合理的。

如何使用标准 html/css 获得我想要的效果？

这里有一些显示问题的示例代码。请注意遮挡我的水印图像的白色块。

<html>
<head>
<style type="text/css">

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

#table2 { background-color: white }
#div2 { background-color: white }
</style>
</head>
<body class="everything">

  <table id="table1"><tr><td>Top</td></tr></table>
  <!-- This table put a big white line over my watermark image. -->
  <table id="table2"><tr><td>Middle</td></tr></table>
  <table id="table3"><tr><td>Bottom</td></tr></table>

  <div id="div1"><tr><td>Top</td></tr></div>
  <!-- Thought maybe it was a table thing but nope, divs do it too. -->
  <div id="div2"><tr><td>Middle</td></tr></div>
  <div id="div3"><tr><td>Bottom</td></tr></div>

</body>
</html>

【问题讨论】：

标签： html css watermark

【解决方案1】：

不幸的是，这是预期的行为。 background-image 和 background-color 是 background 属性的子属性。由于您在 #table2 和 #div2 上定义了背景，因此您无法再“透过”它们看到页面背景。

CSS3 允许您使用rgba() 表达式设置背景的不透明度，但 IE 不支持此功能 (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 值。

【讨论】：

【解决方案2】：

如果没有一些巧妙的 HTML/CSS hack，就无法完成您想做的事情。如果您设置元素的背景颜色，则不会允许其下方的图像“渗透”。

【讨论】：

【解决方案3】：

您可以在此处查看设置 CSS 不透明度：http://www.quirksmode.org/css/opacity.html

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

【讨论】：

【解决方案4】：

您正在为 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;
}

【讨论】：