0

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) 图像的内联列表。我想通过悬停在透明图像上来更改其背景颜色，但它充当图像不透明。你会建议如何解决这个问题？

4

5 回答 5

1

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

如果你想通过 CSS

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

如果你想通过 JavaScript

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

您可以在此处查看这些将存在的进一步陷阱

于 2012-07-10T09:04:35.350 回答
0

只是出于好奇......你有没有在旧版本的 IE 中测试过这个？

:hover伪类不适用于所有元素，并且inline-blockIE7 中仅适用于内联元素（列表项为块级），在 IE6 中不适用。

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

于 2012-07-10T10:41:29.113 回答
0

只要浏览器是 IE 7+，透明 PNG 对我来说很适合它们背后的背景。我怀疑您的 PNG 可能不透明。

于 2012-07-10T09:03:08.543 回答
0

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

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

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

希望能帮助到你！

于 2012-07-10T09:05:21.203 回答
0

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

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

于 2012-07-10T09:12:27.803 回答