CSS - 有色不透明

我想知道是否可以將色調應用於css中的不透明度？CSS - 有色不透明

我有一個不同大小的PNG。當用戶懸停在PNG上時，我希望PNG以＃000的色調將不透明度更改爲0.5。根據w3schools，您只能修改不透明度值，而不是總是設置爲#FFF的色調。

我試圖將其不透明度設置在我的PNG頂部，並通過CSS讓它在PNG懸停時在display:none/block;之間切換。這不起作用，因爲我的PNG不是矩形圖像，並且各種尺寸都意味着黑盒不僅僅覆蓋我的PNG。

對我的問題還有其他解決方案嗎？

2013-05-01 Jon

「據W3Schools的」 - 停在那兒。 – lifetimes 2013-05-01 22:25:31

@Zenith - 你的意思是w3schools不是一個可靠的來源，或者沒有其他的選擇？ – Jon 2013-05-01 22:26:16

@Jon他們是萬維網上最糟糕的資源之一 – 2013-05-01 22:26:43

div:hover { opacity: .5; -webkit-filter: grayscale(100%) sepia(100%); }

這裏使用了CSS filter property，這是開始gain support。有許多可能的效果，所以你可能會實現你的原始黑色/灰色色調的願望。

2013-05-01 22:28:41

完美。謝謝:) – Jon 2013-05-01 22:33:04

沒問題。請記住，瀏覽器支持並不完整，但您可以使用舊的IE過濾器作爲後備，和/或也可以考慮使用SVG過濾器（已經有更多的瀏覽器支持）。取決於你想投入多少努力。 – 2013-05-01 22:36:08

這個工作在FireFox/IE9 +上嗎？ – Jon 2013-05-01 22:41:01

您可以將背景顏色應用於懸停時的圖像以獲得所需的效果。這裏有一個例子：http://jsfiddle.net/atbnn

img:hover { 
    opacity: 0.5; 
    background: #000; 
}

2013-05-01 22:28:28

回答