重疊背景圖像

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

重疊背景圖像

回答

相關問題