IE8 设置css图片高和宽图片失真，同时设置了图片滤镜效果，图片为什么会失真
用img标签设置了图片的高和宽，比图片本来的宽度要小，然后使用filter:alpha(opacity=60);滤镜效果，但是图片显示的时候失真了，这种现象只有在IE8上...
用img标签设置了图片的高和宽，比图片本来的宽度要小，然后使用 filter:alpha(opacity=60);滤镜效果，但是图片显示的时候失真了，这种现象只有在IE8上出现。当我去掉滤镜是图片显示正常，保留滤镜去掉宽和高图片显示也正常，怎么才能既设置图片大小又能使用滤镜
<style>
.background
{
overflow:hidden;
width:50px;
height:40px;
border: 0px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
.background:hover{
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
}
.d
{
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<div class="d">
<img src="revert.png" class="background">
</div>
</body>
代码就是这样的，图片变得模糊，清晰度变差 展开
<style>
.background
{
overflow:hidden;
width:50px;
height:40px;
border: 0px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
.background:hover{
filter:alpha(opacity=100);
/* CSS3 standard */
opacity:1;
}
.d
{
max-width: 100%;
max-height: 100%;
}
</style>
<body>
<div class="d">
<img src="revert.png" class="background">
</div>
</body>
代码就是这样的，图片变得模糊，清晰度变差 展开
3个回答
展开全部
宽度小了，必然失真， 你的滤镜只是透明度，你所说的失真是比例失真吗？还是把代码贴出来，帮你看看。
更多追问追答
追问
代码大概就是这样
追答
只是.background:hover 这个伪类不起作用 你所说的失真是指哪？如果指长宽失真（我不知道你PNG的长宽比） 所以你不如就把height:auto;或者干脆不写，它叫自动长宽比了。
本回答由网友推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
