1

我想创建一个带有水印的 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>
4

4 回答 4

3

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

CSS3 允许您使用rgba()表达式设置背景的不透明度，但 IE 不支持此功能（Firefox 3 和 Safari/Webkit支持）。要在 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 值。

于 2009-02-26T23:34:14.087 回答
1

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

于 2009-02-26T23:33:15.930 回答
1

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

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

于 2009-02-26T23:44:36.463 回答
0

您正在为 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;
}
于 2009-02-26T23:33:37.830 回答