当我在其上放置一个盒子阴影时,为什么这个PNG会出现一个看不见的背景？
我有正确的代码.没有添加颜色.有我所有的预先修复.它在任何浏览器中都显示如下.我正在使用PS中正确的透明度设置保存它,如屏幕截图所示.它是透明的,除非我在它周围放一个盒子阴影.这是什么？
以下是一些截图:
这是预期的行为.即使您有透明度,图像也是正方形.如果您希望PNG上的阴影适合非透明部分,则必须将阴影添加到PNG本身而不使用css阴影.
在您正在查看的特定场景中(假设您尝试做的是为三个相同形状的图像选项卡中的一个添加阴影),您可以将每个选项卡放在带有填充的div中,阴影将在其中创建单个png,阴影形状适当,只有一个css类,将阴影图像作为背景应用于活动选项卡.
编辑:另一种方法？
在我回答这个问题之后,我想"也许可以将一个样式应用到图像多边形地图上,并在其上投下阴影？".不幸的是,答案是否定的.由于超出我的原因,图像地图只能应用少量样式(例如定位)并且永远不可见.然而,它确实引导我走下另一条道路:使用多边形区域构建图像地图,并使用javascript获取坐标并在其上创建带阴影滤镜的svg.然后可以将此svg设置为具有透明PNG的帧的背景图像(或者在图像顶部定位另外的透明svg.这显然不适用于所有浏览器,因为有些不支持svg,但它是一个有趣的概念,我可能必须将一个js库放在一起来实现它...它肯定会使形状阴影更容易应用.