Question

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）。我想让透明图像通过悬停在其上来改变其背景颜色，但它的作用是图像不透明。你会怎么建议解决这个问题？

Answer 1

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

如果你想通过CSS

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

如果你想通过JavaScript

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

您可以查看这些有here

的进一步陷阱

Answer 2

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

Answer 3

我认为您应该在CSS中使用 li 元素的“内联块”显示：

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

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

希望它有所帮助！

Answer 4

对于＆lt; IE7：
这些浏览器不支持PNG alpha透明度。但是，具有Alpha透明度的PNG-8图像将以完全透明的方式呈现。但是真彩色PNG的alpha透明度在渲染时会显示为灰色。

因此，尽可能使用PNG-8图像并完成。否则，你将放弃浏览器支持或使用像他在回答中提到的Shiv这样的解决方法。

Answer 5

出于好奇......你有没有在旧版本的IE中测试过它？

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

我认为你将在<a>内使用<li>;这应该解决两个问题（当然，在透明度问题之上）。

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

5 个答案: