透明PNG圖像背後的圓形背景

Question

我有一個包含大小爲64x64的背景圖像的div。當用戶將鼠標懸停在div上時，我想給這個div一個圓形陰影或徑向背景。

如果我簡單地給div一個方塊陰影，陰影會以方形的形狀投射出去。如果我讓div有一個半徑，那麼我需要使我的div大於64x64，這樣它纔不會裁剪？

看一看下面的例子，說明什麼，我試圖描述： http://jsfiddle.net/rNeaZ/2/

第4例（在上面的鏈接所示），特別是不適合我什麼，因爲之後：

• 它的尺寸比我的64x64圖片大很多
• 圖片看起來有一個圓形邊框現在，這不是我想要的;我是一個圓形陰影或背景後背後

Answer 1

這可能是更容易，更有效和更高效的一個不錯的徑向陰影添加到image sprite和懸停更改背景圖片的位置。

Answer 2

最簡單的解決方案是添加一個合適的background-color，但只有當你需要一個0 0的偏移時才能工作，就像你的例子。

更一般的情況是創建一個僞元素並將陰影和背景顏色應用於該元素。如果第一個想法不適用於您的案例，我可以更詳細地描述這一點。