透明png图像后面的圆形背景
我有一个 div，其中包含大小为 64x64 的背景图像。当用户用鼠标悬停在 div 上时，我想给这个 div 一个圆形阴影或径向背景。
如果我简单地给 div 一个盒子阴影，阴影就会以方形投射。如果我让 div 有一个半径，那么我需要让我的 div 大于 64x64，这样它就不会裁剪？
看看下面的例子，它说明了我想要描述的内容： http://jsfiddle.net/rNeaZ/2/
第四个示例（如上面的链接所示）特别是不适合我所追求的，因为：
- 它的尺寸比我的 64x64 图像大得多，
- 图像现在看起来有一个圆形边框，这不是我想要的；我在寻找圆形阴影或背后的背景
I have a div that contains a background image of size 64x64. I would like to give this div a circular shadow or radial background when the user hover's over the div with the mouse.
If I simply give the div a box shadow, the shadow is cast around in a square shape. If I make the div have a radius, then I will need to make my div bigger than 64x64 so that it doesn't crop?
Have a look at at the following example that illustrates what I am trying to describe:
http://jsfiddle.net/rNeaZ/2/
The 4th example (shown in link above) in particular doesn't suit what I am after because:
- it's size is much larger than my 64x64 image
- the image looks to have a circular border now, which is not what I want; I am after a circular shadow or background behind it
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
向 和更高效。 “nofollow”>图像精灵并更改悬停时背景图像的位置。
It will probably just be easier and more effective and more efficient to add a nice radial shadow to an image sprite and change the location of the background image on hover.
最简单的解决方案是添加适当的背景颜色，但这仅在您需要 0 0 偏移时才有效，就像您的示例一样。
更一般的情况是创建一个伪元素并向其应用阴影和背景颜色。如果第一个想法不适用于您的情况，我可以更详细地描述这一点。
The simplest solution would be to add an appropriate
background-color, but that would only work when you need an offset of 0 0, like your example.The more general case would be to create a pseudo-element and apply the shadow and background color to that. I can describe this in more detail if the first idea doesn't apply to your case.