透明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的偏移时才能工作，就像你的例子。

更一般的情况是创建一个伪元素并将阴影和背景颜色应用于该元素。如果第一个想法不适用于您的案例，我可以更详细地描述这一点。