background - PNG图像不透明度在浏览器中不起作用

Question

正如您在此处看到的 Photoshop 中的屏幕截图：

在我将它保存到网络后，使用 PNG-24 格式，这就是它在我的网站上的样子：

为什么图像不透明度在我的浏览器上不起作用？使用火狐。

实际PNG：

Answer 1

我不确定您想要的效果是什么，但我认为您希望渐变在底部消失。有了这个假设，渐变的问题在于它从顶部的棕色渐变到底部的白色。

你的渐变看起来像这样：

您想将渐变两侧的颜色更改为相同的棕色，然后将右侧的不透明度降低到 0%，如下所示：

我已经为你调整过了，所以这里是：

它在白色背景上看起来没有任何不同，但是当它在另一种颜色或纹理上时，您会看到不同。

Answer 2

您的 Photoshop 图层是否添加了一些效果？即相乘等。这意味着该层依赖于它下面的东西并受到它的影响。

Answer 3

多年前我面临同样的问题。当我们为网络保存文件或图像时。它应该另存为网页，当我们以 PNG 格式保存时，请确保关闭所有背景图层。然后只需保存为网络并从设置选项中选择 PNG(24)。

& 是 确保您在网络中通过图像的位置必须在标签中包含 CSS。

background-color:none;