在透明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的偏移量时才会这样做，就像你的例子一样。

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