如何让元素具有不同的背景颜色，但背景图像随处显示（又名水印）？
我想创建一个带有水印的 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>
I want to create an html page with a watermark. I set the background-image on the body. However I have some elements that are not allowing the background image to bleed through. They define their own background-color (but not background-image), overriding the color in the body. This surprised me. They didn't override the image, just the color.
It seems reasonable to have a visible watermark on a page with elements having different background colors.
How do I get the effect I want using standard html/css?
Here's some sample code that shows the problem. Note the white block obscuring my watermark image.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
对您来说不幸的是，这是预期的行为。
background-image和background-color是background属性的子属性。 由于您在#table2和#div2上定义了背景，因此您无法再“透过”它们看到页面背景。CSS3 允许您使用 rgba() 表达式设置背景的不透明度，但 IE 不支持此功能（Firefox 3 和 Safari/Webkit 可以）。 要在 IE 中获得类似 rgba() 的效果，您可以使用
filter:规则，如下所示：注意
startColorstr和endColorstr的作用方式> 参数有第四个 alpha 值。Unfortunately for you, this is the intended behavior.
background-imageandbackground-colorare sub-properties of thebackgroundproperty. Since you defined a background on#table2and#div2, you can't see "through" them to the page background anymore.CSS3 allows you to set the opacity of the background using the
rgba()expression, but IE doesn't support this (Firefox 3 and Safari/Webkit do). To get an rgba()-like effect in IE, you can use afilter:rule such as the following:Note how the
startColorstrandendColorstrparameters have a fourth value for alpha.如果没有一些巧妙的 HTML/CSS 技巧，就无法完成您想要做的事情。 如果您设置元素的背景颜色，则它不会允许其下方的图像“渗透”。
There is no way to accomplish what you want to do without some clever HTML/CSS hacks. If you set the background color of an element it's not going to allow images underneath it to "bleed through".
您可以在此处查看设置 CSS 不透明度： http://www.quirksmode.org/css/ opacity.html
但是，我相信（未测试）这也适用于元素内的任何文本，因此您可能需要第二个类将表格内的文本的不透明度设置回 1 等。
You can look into setting the CSS opacity here: http://www.quirksmode.org/css/opacity.html
However, I believe (not tested) that this would apply to any text inside the elements as well so you would likely need a second class to set the opacity back to 1 for the text inside the table, etc.
您正在为 body 元素设置背景图像。 div 和表格不透明，并且它们位于 body 元素的前面，这就是它们覆盖水印的原因。
如果您想将水印单独应用于每个元素，您应该这样做：
或者也许
You're setting the background-image for the body element. The divs and the table are not transparent, and they are in front of the body element, that's why they cover your watermark.
If you want to apply the watermark to each element individually, you should do something like this:
or maybe