2

对于我自己的网站，我向访问者展示了几张图片。这些图片应该在opacity: 0.7;然后使用transition: opacity 0.50s ease-in-out;图像悬停在它们上时应该达到 100% 的可见性。本段下的代码显示了我如何让它在 Chrome 上工作。但即使它在 Chrome 中运行，它也无法在 Firefox 和 Internet Explorer 等浏览器中运行。你能帮我找出代码的哪一部分是错误的吗？我已经添加了我能想到的所有跨浏览器不透明度支持！

.image.full2 {
    display: block;
    width: 100%;
    -moz-opacity: 0.7;
    -webkit-opacity: 0.7;
    opacity: 0.7;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
    filter: alpha(opacity=70);
    -khtml-opacity: 0.7;
    -moz-transition: opacity 0.50s ease-in-out;
    -webkit-transition: opacity 0.50s ease-in-out;
    -o-transition: opacity 0.50s ease-in-out;
    -ms-transition: opacity 0.50s ease-in-out;
    transition: opacity 0.50s ease-in-out;
}

.image.full2:hover {
    -webkit-opacity: 1.0;
    -moz-opacity: 1.0;
    opactiy: 1.0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -khtml-opacity: 1.0;
}
4

2 回答 2

1

无需定义-webkit-或-moz-因为几乎新的浏览器支持opacity属性。但是关于 IE8 或更早版本，你应该使用filter:alpha(opacity= x );x 应该是 0 到 100 %。也许它可以帮助你...... :)

.image.full2 {
    display: block;
    width: 100%;
    opacity:0.7;
    filter:alpha(opacity=70); /* For IE8 and earlier */
    -moz-transition: opacity 0.50s ease-in-out;
    -webkit-transition: opacity 0.50s ease-in-out;
    -o-transition: opacity 0.50s ease-in-out;
    -ms-transition: opacity 0.50s ease-in-out;
    transition: opacity 0.50s ease-in-out;
}

.image.full2:hover {
    opacity:1;
    filter:alpha(opacity=100); /* For IE8 and earlier */
}

演示：http: //jsfiddle.net/DcSnZ/1/

来源： http ://www.w3schools.com/css/css_image_transparency.asp

于 2013-11-01T21:48:15.570 回答
0

试试这个

.image.full2 {
  display: block;
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
  opacity: 0.7;
  -webkit-transition: opacity 0.5s ease-in-out;
  -moz-transition: opacity 0.5s ease-in-out;
  -o-transition: opacity 0.5s ease-in-out;
  transition: opacity 0.5s ease-in-out;
}

.image.full2:hover {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}
于 2013-11-01T21:43:18.937 回答