透明的png图像在浏览器中不是完全透明的答案

【问题标题】：Transparent png image is not fully transparent in browser透明的png图像在浏览器中不是完全透明的
【发布时间】：2020-02-07 19:45:06
【问题描述】：

我正在使用 Chrome 浏览器。我有一个完全透明的.png 徽标图像，但似乎有问题：

您需要再看第二遍，但您可以看到图像的色调比背景浅。我用 CSS 创建背景：

background: #e1e2e4;
background: -webkit-gradient(linear, left top,
            left bottom, from(#e1e2e4), to(#8f9094));

background: -moz-linear-gradient(top,  #e1e2e4,  #8f9094);
filter: progid:DXImageTransform.Microsoft.gradient
        (startColorstr='#e1e2e4', endColorstr='#8f9094'); 

background-repeat: no-repeat;
background-attachment: fixed;

任何想法为什么会发生这种情况？我该如何解决这个问题？

【问题讨论】：

我真的看不出来...PNG是24位保存的吗？
可能图像在整个背景上具有非常轻微的不透明度。您是否尝试过进入 Photoshop（或同等软件）、选择背景、删除它并重新保存图像？
您确定色差不是背景渐变的一部分吗？
我在photoshop中有这个文件，上面没有图层。它是 PNG RGB 颜色 8 位/通道
@feeela——我同意。 ArtWorkAD，您是否将背景颜色设置为纯色并进行测试以查看是否看到相同的结果？颜色偏移很可能是您在背景中设置的渐变的颜色变化点。

标签： css png

【解决方案1】：

它与颜色配置文件和颜色校正有关。详情请参阅this article。

【讨论】：

我在 Chrome 中看到了这个问题。文章说“PNG 可以用三种不同的方式标记。首先，它们可以有一个包含相关 ICC 配置文件的 iCCP 块。其次，它们可以使用 sRGB 块明确标记为 sRGB。最后，它们可以包含 gAMA 和 cHRM 块“ -- 我这样做了，我仍然看到效果。

【解决方案2】：

似乎有效的简单修复..

下载并运行 GIMP。
打开您的 PNG 文件。
从主菜单中选择图像 -> 模式 -> 索引。
保存/覆盖您的 PNG 文件。

【讨论】：

【解决方案3】：

我在通过 markdown (reveal.js) 在 div 和 background-color:red 中加载透明 PNG 时遇到问题，但透明像素显示的颜色比红色亮：

较浅的红色是透明的PNG（左下角的白色是标志的一部分）。

事实证明，reveal.js 加载带有 0.12 alpha 的白色背景的 markdown 图像（至少带有 beige 主题）：

.reveal section img {
    ...
    background: rgba(255, 255, 255, 0.12);
    ...
}

在 Chrome 开发者工具的 Inspect 功能中停用它可以解决问题。

我终于在 Markdown 中解决了这个问题，方法是使用与我的 div 相同的背景颜色设置图像的样式

![The logo](logo_with_transparent_background.png){class=plain style="background-color:red"}

【讨论】：