css - 透明 png 图像后面的圆形背景

Question

我有一个 div，其中包含大小为 64x64 的背景图像。当用户用鼠标悬停在 div 上时，我想给这个 div 一个圆形阴影或径向背景。

如果我只是给 div 一个盒子阴影，阴影会以方形投射。如果我让 div 有一个半径，那么我需要让我的 div 大于 64x64 以便它不会裁剪？

查看以下示例，该示例说明了我要描述的内容：http: //jsfiddle.net/rNeaZ/2/

第 4 个示例（如上面的链接所示）尤其不适合我所追求的，因为：

• 它的大小比我的 64x64 图像大得多
• 图像现在看起来有一个圆形边框，这不是我想要的；我在它后面的圆形阴影或背景之后

Answer 1

将漂亮的径向阴影添加到图像精灵并更改悬停时背景图像的位置可能会更容易、更有效和更高效。

Answer 2

最简单的解决方案是添加适当的background-color，但这仅在您需要偏移量 0 0 时才有效，例如您的示例。

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