css - 透明的png图像在浏览器中不是完全透明的

Question

我正在使用 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;

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

Answer 1

它与颜色配置文件和颜色校正有关。有关更多详细信息，请参阅本文。

Answer 2

似乎有效的简单修复..

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

Answer 3

div我在通过降价（reveal.js）加载透明PNG时遇到问题background-color:red，但透明像素显示得比红色更亮：

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

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

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

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

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

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