重叠背景图像
问题描述:
我有一张桌子,背景图像使用css属性background-image。在表格中,我有一些使用<img
的图像。图像<img
表格在背景图像上方。我希望背景图像与文字一样覆盖图像<img
。那可能吗?重叠背景图像
代码示例:
<style>
#content { background-image:url("background-image.jpg"); background-repeat:repeat-y}
</style>
<table id="content">
<tr>
<td>Some text.....text.....text
Image: <img src="quadrado.jpg" />
</td>
</tr>
</table>
答
"I would like to display the two images. The background image
above the quadrado.jpg ! Like a watermark"
听起来像你想的覆盖。你不能用CSS来做到这一点。
但是你可以来通过添加样式,比如如此接近:
#content
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
#content img
{
opacity: 0.8;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
filter: alpha(opacity=80);
}
。
要获得更多真正的叠加效果,您需要将它编码到您的HTML中或使用javascript来实时添加它。
看看this page。它使用javascript为类OverlayTheBackground
的块生成覆盖图。
还有jQuery plugins that are supposed to generate overlays。
也许张贴了你想要的图片。
但是,它听起来像所有你需要做的就是添加这种风格:
#content img {visibility: hidden;}
答
我不知道我理解的问题完全,但如果你想要的背景图像通过内容图像的部分来展示,你将需要使用PNG的或gif的作为他们允许图像的一部分是透明的,jpg也不是。
我想显示两个图像。 quadrado.jpg上方的背景图片!像水印一样。谢谢 – 2010-06-19 12:38:37
好吧,我更新了我的答案。 – 2010-06-20 12:34:08
糟糕,演示页面存在竞态条件,所以它并不总是正确地测量位置(当取消网络而不是我的Intranet时)。现在应该修好了。 – 2010-06-21 09:37:47