当我在它上面放置一个盒子阴影时，为什么这个 PNG 会显示出不可见的背景？
我有正确的代码。没有添加任何颜色。拥有我所有的预先修复。它在任何浏览器中都显示如下。我在 PS 中使用正确的透明度设置保存它，如屏幕截图所示。它是透明的，除非我在它周围放置一个盒子阴影。这是什么？
以下是一些屏幕截图：
I have the correct code. No color added to it. Have all my pre-fixes. It shows up like this in any browser. I am saving it with the correct transparency setting in PS as seen in the screen shot. It is transparent except when I put a box-shadow around it. What is this?
Here are some screenshots:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
这是预期的行为。即使有透明度，图像也是正方形。如果您希望 PNG 上的阴影适合非透明部分，则必须将阴影添加到 PNG 本身，而不是使用 css 阴影。
在您正在查看的特定场景中（假设您想要做的是将阴影添加到三个相同形状的图像选项卡之一），您可以将每个选项卡放在一个 div 中，并在阴影所在的位置进行填充，创建一个具有适当形状的阴影的单个 png，并且只有一个 css 类，该类将阴影图像应用为活动选项卡上的背景。
编辑：另一种方法？
在我回答这个问题后，我想“是否可以将样式应用于图像多边形贴图，并在其上投射阴影？”。不幸的是，答案是否定的。由于我无法理解的原因，图像映射只能应用少量样式（例如定位），并且永远不可见。然而，它确实引导我走上了另一条路：构建一个带有多边形区域的图像地图，并使用 javascript 获取坐标并创建一个带有阴影滤镜的 svg。然后可以将此 svg 设置为具有透明 PNG 的框架的背景图像（或将其他透明的 svg 放置在图像顶部。这显然不适用于所有浏览器，因为有些浏览器不支持 svg，但这是一个有趣的方法概念，我可能必须组合一个 js 库来实现它......它肯定会使应用形状阴影变得更容易。
This is the expected behavior. The image is a square even if you have transparency. If you want a shadow on the PNG to fit the non-transparent portion, you'll have to add the shadow to the PNG itself and not use a css shadow.
In the particular scenario you're looking at (assuming that what you're trying to do is add a shadow to one of three identically shaped image tabs) you can put each tab in a div with padding where a shadow would go, create a single png with with a shadow shaped appropriately, and just have a css class that applies the shadow image as a background on the active tab.
EDIT: Another approach?
After I answered this I thought "could one perhaps apply styling to an image poly map, and have the shadow cast on that?". Unfortunately, the answer is no. For reasons that are beyond me, image maps can only have a small number of styles apply to them (positioning, for instance) and will never be visible. However, it did lead me down another avenue: build an image map with poly areas, and use javascript to take the coordinates and create an svg with a shadow filter on it. This svg could then be set as the background image to the frame with the transparent PNG (or positioning an otherwise tranparent svg on top of the image. This would obviously not work for all browsers as some don't support svg, but it's an interesting concept, and I might have to put together a js library for implementing it... it would certainly make applying shaped shadows easier.
阴影应用于整个图像，CSS 不知道图像的透明度，因此它无法将阴影仅应用于其实际的不透明内容。您应该在 Photoshop（或图像编辑软件）上在图像中添加阴影。
The shadow is applied to the whole image, CSS is not aware of the transparency of your image and then it can't apply the shadow just to the actual not-transparent content of it. You should add a shadow in your image, on Photoshop (or your image-editing software).
因为您的 png 正在根据元素设置其阴影，在您的情况下，该元素是 x/y 维度的图像（一个盒子）。它不知道如何识别截止线，而是将阴影应用到图像本身，而不是作为图像的一部分。
Because your png is setting its shadow based on the element which in your case is an image of x/y dimension (a box). It doesn't know to recognize the cutoff lines, apply the shadow to the image itself instead as part of the image.
如果您看到图像的左侧出现蓝色背景，它仍然是透明的。
左下角的阴影让它看起来像是有边框。
如果您想在实际的“标志”上添加阴影，您应该将其添加到图像编辑器中
It still is transparent if you see the left side of the image where the blue background appears.
The shadow on the bottom left just makes it look like there is a border.
If you want a shadow on the actual "sign" you should add that in your image editor
无论透明度如何，投影都会应用于图像的尺寸。
The dropshadow is applied to the dimensions of the image regardless of transparency.