我想在懸停上應用重疊圖像

代碼，我對CSS是：

 
#gallery img { 
width:700px; 
height:213px; 
margin:0; 
padding:0; 
}

所以我想......

 
#gallery img:hover { 
    width:700px; 
    height:213px; 
    position: relative; 
    z-index:10000; 
    background: transparent url(../images/imgOverlay-Zoom.png) no-repeat center center; 
}

會的工作，但它不。

我透明懸停覆蓋的圖像是：

alt text

我在做什麼錯。我想我可能在某處有一個損壞的css標籤。

任何幫助表示讚賞。

來源

2010-12-20 422

你是什麼意思_ 「它不工作」 _？你能清楚嗎？ – jwueller 2010-12-20 22:55:21

你正試圖在* img'的背景*中顯示'background-image'？相關的html是什麼樣的？ – 2010-12-20 23:04:02

如果原始圖像沒有透明度，那麼背景圖像不可見，因爲它在背景中......正如人們所期望的那樣。另一種方式可能會奏效，但我沒有測試過。我的意思是將原始圖像作爲背景圖像，然後在懸停時將src屬性設置爲../images/imgOverlay-Zoom.png。 – devius 2010-12-20 23:15:27

固定。 CSS：

 
#container { position:relative; width:700px; height:213px;} 
    .image { position:absolute; width:700px; height:213px; z-index:0;} 
    .overlay { background-image:none); position:absolute; width:700px; height:213px; z-index:1;} 
    .overlay:hover { background: transparent url(images/imgOverlay-Zoom.png)no-repeat center center;}

HTML：

<div class="overlay" ></div> 
<div class="image" ><img src="images/listing-page-with-gradient.png" /></div>

來源

2010-12-20 23:13:16 422

使#gallery有一個背景圖像，而不是在裏面有一個圖像標籤......否則它會在背景之上。然後有另一個div裏面有:hover僞類。如果它仍然不起作用，請取出transparent這個詞。

或者你不能覆蓋圖像，只是交換組合圖像的原始圖像？

來源

2010-12-20 22:54:49

嗯，我想重疊圖像。顯然使用z-index我認爲它會起作用。也許我需要澄清一個容器，會繼續玩下去。我看着這個線程：http://stackoverflow.com/questions/2474198/on-hover-overlay-image-in-css所以也許能夠湊齊一個更好的工作，歡呼聲 – 422 2010-12-20 22:56:41

你好那裏我想你誤解了CSS的機制：圖像本身是一個對象，指定的背景在它背後。所以你必須將非透明圖像作爲背景，並在src中指定透明圖像。但是這不適合你的需求。與CSS解決方法將是麻煩的，所以我會建議交換整個圖像與CSS懸停或JavaScript的onMouseover或jQuery - 因爲它是正確的方式得到familliar。

來源

2010-12-20 23:11:46 Denis

我沒有誤解，我只是沒有澄清容器，覆蓋層和z-index正確。我不需要js來做到這一點，事實上，我現在使用純CSS來運行它。謝謝 – 422 2010-12-20 23:14:39

我想在懸停上應用重疊圖像

回答

相關問題