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) 图像的内联列表。我想通过将鼠标悬停在透明图像上来改变其背景颜色，但它的作用是图像不透明。您建议如何解决这个问题？
最佳答案
实际上，对于PNG格式的图像，IE6中存在alpha透明度问题。由于这些浏览器缺少对 alpha channel 的支持，因此有一些标签可以支持您的代码。
如果你想通过 CSS 实现
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
如果你想通过 JavaScript
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
您可以检查这些将有的进一步陷阱 here
关于html - 透明 PNG 图像不考虑背景颜色，并且不透明，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11409835/