繁体   English   中英

不透明度转换在Firefox和IE(及其他?)中不起作用

[英]Opacity Transition not working in Firefox and IE (and others?)

对于我自己的网站,我向访问者展示了几张照片。 这些图片应具有opacity: 0.7; 然后使用transition: opacity 0.50s ease-in-out;悬停在它们上方时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;
}

无需定义-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

试试这个

.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;
}

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM