在背景上疊加不透明圖像

我對XHTML/CSS很新，但現在已經讓我的網站佈置得很漂亮。只是一個鬆散的結局，我似乎無法過去（我花了相當一段時間在這個&找到相關的信息，但沒有什麼完全相同的）：在背景上疊加不透明圖像

我想要做的是覆蓋一個微弱圖像在我的背景上。我不想使用「不透明」過濾器，因爲它們觸發了我的IE瀏覽器資源管理器8上的腳本安全警報。

我很高興使用我創建的不透明gif圖像。

我可以看到z-index是要走的路。但是，我的圖像區域堅持要在頁面的更遠處進行定位，而不是覆蓋。

這就是我認爲是我要去的地方錯了代碼的關鍵提取物[我已剪斷的細節，如字體]：

HTML：

body { position:relative; z-index:1; 
    margin: 0 20px 0 0; 
    padding: 0; 
    background: #FFFFFF url(images/ge01.jpg) repeat-y;[snip]} 

<div id="transparency"> 
</div>

CSS：

#transparency { 

url(images/transparency.jpg) no-repeat; 
width:230px; 
height: 1000px; 
position: relative; top: 80px; left:0; 
z-index:2; 

}

來源

2011-03-23 Jumbo

您是否嘗試過使用position：absolute;在你的透明元素上？

位置：相對意味着您將定位透明元素與其他內容的關係。

來源

2011-03-23 16:32:55

謝謝，克雷格 - 那很快！這已經部分解決了它;實際上，我故意將圖像發送到頁面的右上角，這是頁面的一個清晰區域，現在頁面在我開始嘗試覆蓋之前已恢復到原來的樣子。疊加圖像在幕後，但沒有出現。再次感謝和任何進一步的建議讚賞。巨大的 – Jumbo 2011-03-23 17:04:32

在背景上疊加不透明圖像

回答

相關問題