重叠背景图像

我有一张桌子，背景图像使用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>

来源

2010-06-18 Douglas V. Pasqua

"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;}

来源

2010-06-18 23:44:24

我想显示两个图像。 quadrado.jpg上方的背景图片！像水印一样。谢谢 – 2010-06-19 12:38:37

好吧，我更新了我的答案。 – 2010-06-20 12:34:08

糟糕，演示页面存在竞态条件，所以它并不总是正确地测量位置（当取消网络而不是我的Intranet时）。现在应该修好了。 – 2010-06-21 09:37:47

我不知道我理解的问题完全，但如果你想要的背景图像通过内容图像的部分来展示，你将需要使用PNG的或gif的作为他们允许图像的一部分是透明的，jpg也不是。

来源

2010-06-18 23:06:04 jeroen

重叠背景图像

回答

相关问题