在透明png图象后的圆背景

时间:2011-06-17 15:04:19

标签: css3 radial-gradients

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

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

看看以下示例,说明我要描述的内容: http://jsfiddle.net/rNeaZ/2/

第4个例子(在上面的链接中显示)特别不符合我的要求,因为:

  • 它的大小远远大于我的64x64图像
  • 图像现在看起来有一个圆形边框,这不是我想要的;我正在追踪它背后的圆形阴影或背景

2 个答案:

答案 0 :(得分:1)

image sprite添加漂亮的径向阴影并在悬停时更改背景图像的位置可能会更容易,更有效更高效。

答案 1 :(得分:0)

最简单的解决方案是添加一个合适的background-color,但只有当你需要0 0的偏移量时才会这样做,就像你的例子一样。

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