透明的PNG图像不考虑背景色，并且表现为不透明
[英]Transparent PNG image doesn't regard background color, and acts as not transparent
问题描述
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）。 我想通过将透明图像悬停在透明图像上来更改其背景颜色，但由于图像不透明，因此它的作用是。 您将如何建议解决此问题？
5 个解决方案
解决方案1
1 2012-07-10 09:04:35
对于PNG格式的图像，实际上IE6中存在alpha透明度问题。 由于这些浏览器缺少对Alpha通道的支持，因此有些标签可以支持您的代码。
如果您想要通过CSS
img {
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);
}
如果您想要通过JavaScript
img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(...)";
您可以在此处查看更多陷阱
解决方案2
0 2012-07-10 09:03:08
只要浏览器是IE 7+，透明PNG就会对我有很好的背景。 我怀疑您的PNG可能不是透明的。
解决方案3
0 已采纳 2012-07-10 09:05:21
我认为您应该在CSS中为li元素使用“行内阻止”显示：
#center-box ul li {
display: inline-block;
}
这样，背景不仅将应用于区域的文本部分，还将应用于整个图像。
希望能帮助到你！
解决方案4
0 2012-07-10 09:12:27
对于<IE7：
这些浏览器不支持PNG alpha透明度。 但是，具有Alpha透明度的PNG-8图像将以完全透明的方式呈现。 但是truecolor PNG的alpha透明度在呈现时显示为灰色。
因此，请尽可能使用PNG-8图像，然后完成。 否则，您必须放弃对浏览器的支持或使用其答案中提到的Shiv之类的变通方法。
解决方案5
0 2012-07-10 10:41:29
出于好奇...您是否在IE的较早版本中对此进行了测试？
:hover伪类不适用于所有元素，并且inline-block只能应用于IE7中的内联元素（列表项是块级），而不能应用于IE6。
我认为您将在<li>使用<a> ； 这应该解决这两个问题（当然，透明度问题也要解决）。
CSS中透明PNG图像的背景颜色
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.