使用CSS在懸停時覆蓋透明圖像

我試圖在懸停時使用CSS覆蓋透明圖像。使用CSS在懸停時覆蓋透明圖像

有一個答案here但它不能在IE7或IE8中工作。誰會知道如何做到這一點？

我想保持超級光，所以不真的想使用JS或類似的東西。

謝謝

來源

2011-04-13 TheTub

僅由一種顏色的圖象TRANSPARANT？ – Martijn 2011-04-13 10:20:59

你能發佈你正在使用的標記嗎？也許分享一個[JS小提琴演示]（http://jsfiddle.net/）向我們展示你試過了什麼？ – 2011-04-13 10:29:22

你可以在這裏看到效果 - http://www.nightlylabs.com/uploads/test.html。它適用於FF，Chrome而不是IE。 – TheTub 2011-04-13 10:39:43

我檢查你的鏈接，並基於與this solution想出了。

HTML：

<div class="image"> 
    <img src="xy.jpg" alt="" /> 
    <img class="hoverimage" src="xy_hover.jpg" alt="" /> 
</div>

CSS：

.image { position: relative; width: 184px; height: 219px; } 
.hoverimage { position: absolute; top: 0; left: 0; display: none; } 
.image:hover .hoverimage { display: block; }

應該在所有的瀏覽器包括IE8和IE7工作。它不會在IE6中工作，因爲它只允許：懸停在某些元素上，如鏈接（<a>）。如果您要支持IE6，請將.image更改爲<a>而不是<div>，並將其設置爲display: block;。

來源

2011-04-13 10:39:44 kapa

輝煌。作品一種享受。非常感謝。 – TheTub 2011-04-13 10:50:26

-1

通常我們重新創建應該有一個透明覆蓋在.png格式的圖像。 .Jpeg是一種不支持透明度的平面圖像格式。

我們採取的下一個步驟是有這樣的事情：

<div style="Background-Image:Url(BackgroundImage.Jpg);Width:500px;Height:500px" > 
    <div style="Background-Image:Url(OverlayImage.Png);Width:50%;Height:50%" > 
    ... 
    </div> 
</div>

這是最接近我怎麼能明白你的問題

來源

2011-04-13 10:27:12 Eon

這裏很遠，但是嘗試將

更改爲

– Eon 2011-04-13 10:33:18

同樣的問題。適用於除IE外的所有內容。 – TheTub 2011-04-13 10:38:48

這仍然不能在IE7/8 AFAIK上工作，所以我恐怕這不會回答這個問題。

但是，當我忘記如何使用現代方法進行這項工作時，我已經結束了這個頁面，因此我將答案放在這裏以供參考。

我只能通過將img放在容器/包裝div中做到這一點，因爲img元素不會接受像:after這樣的僞類。

<div class="container"><img src="http://placekitten.com/240/320" alt="icanhaz"></div>

然後CSS被設計爲在懸停時提供一個僞元素。

.container { 
    position: relative; 
} 
.container:hover:after { 
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 

    background: rgba(0,0,0,0.5); /* Here you may also use images, gradients, etc */ 
}

參見示例here

來源

2013-03-29 18:11:01

使用CSS在懸停時覆蓋透明圖像

回答

相關問題