透明PNG图像不考虑背景颜色，并且不透明答案

【问题标题】：Transparent PNG image doesn't regard background color, and acts as not transparent透明PNG图像不考虑背景颜色，并且不透明
【发布时间】：2012-07-10 08:55:38
【问题描述】：

HTML 代码

<!DOCTYPE html>
<html>

<head>

    <title>My Website</title>

    <link href="style.css" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="center-box">
        <ul>
            <li id="fim"><img src="images/1.png" /></li>
            <li id="sim"><img src="images/2.png" /></li>
            <li id="tim"><img src="images/3.png" /></li>
            <li id="fom"><img src="images/4.png" /></li>
        </ul>
    </div>
</body>

</html>

CSS 代码

html {
    height:100%;
}
body {
    background:black;
    border:1px solid white;
    margin:0; 
    padding:0;
    position:absolute;
    height:100%;
    width:100%;
    }
#center-box {
    border:4px solid white;
    color:white;
    position:absolute;
    width:250px;
    height:250px;
    left:50%;
    top:50%;
    margin-left:-150px;
    margin-top:-150px;
    background:grey;
    }
#center-box ul {
    list-style-type:none;
    margin:5px;
    padding:18px;
}
#center-box ul li {
    display:inline;
}
#center-box ul li:hover  {
    background-color:blue;
}

它在页面中间只有一个框，以及一个包含透明 (PNG) 图像的内联列表。我想通过悬停在透明图像上来改变其背景颜色，但它充当图像不透明。您建议如何解决此问题？

【问题讨论】：

我猜这个问题只发生在IE6上？？或 IE 特定的浏览器
没有。它发生在最新的 IE 和 Chrome 上

标签： html css

【解决方案1】：

实际上，在 IE6 中对于 PNG 格式的图像存在 alpha 透明度问题。由于这些浏览器缺少对 alpha 通道的支持，因此有些标签可以支持您的代码。

如果你想通过 CSS 实现

img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}

如果你想通过 JavaScript 实现它

img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";

您可以检查这些将具有的进一步陷阱here

【讨论】：

+1 只是错过了 IE6 可以很好地降级为 PNG-8 图像的完全透明。这通常是一个可接受的解决方案。它可能看起来不太好，但基本上可以在 IE6 中使用。如果可能，应该避免使用 AlphaImageLoader，因为它是性能杀手。
谢谢，这看起来很复杂，但它适用于 inline-block。现在它标志着整个背景:)
@FabianBarney 是的，我知道这就是为什么我在链接中提到了检查它的陷阱。

【解决方案2】：

我认为你应该在 CSS 中为 li 元素使用“inline-block”显示：

#center-box ul li {
    display: inline-block;
}

这样，背景不仅会应用于区域的文本部分，还会应用于整个图像。

希望对你有帮助！

【讨论】：

【解决方案3】：

只要浏览器是 IE 7+，透明 PNG 对我来说在它们背后的背景下效果很好。我怀疑你的 PNG 可能不透明。

【讨论】：

其实它们是透明的，只是我发现了问题。我使用了内联列表元素，所以当我将鼠标悬停在图像上时，只标记了底部，因为它不是块。内联块工作正常。

【解决方案4】：

对于这些浏览器不支持 PNG alpha 透明度。然而，具有 alpha 透明度的 PNG-8 图像以完全透明的方式呈现。但真彩色 PNG 的 alpha 透明度在渲染时显示为灰色。

因此，尽可能使用 PNG-8 图像，您就完成了。否则，您必须放弃浏览器支持或使用 Shiv 在他的回答中提到的解决方法。

【讨论】：

【解决方案5】：

只是出于好奇……你在旧版本的 IE 中测试过吗？

:hover 伪类不适用于所有元素，inline-block 在 IE7 中只能应用于内联元素（列表项为块级），而在 IE6 中则无。

我认为您将在您的<li> 中使用<a>；这应该可以解决这两个问题（当然是透明度问题）。

【讨论】：

是的，我将使用附加到图像的超链接。