不透明度过滤器在Firefox中不起作用答案

【问题标题】：opacity filter not working in firefox不透明度过滤器在Firefox中不起作用
【发布时间】：2013-04-22 05:38:34
【问题描述】：

我是 html 和 css/jquery 的新手。我仍然设法使用 chrome 的检查元素和其他来源自己创建了一个网站。但是，不透明度过滤器在 firefox 中不起作用（使用的 firefox 版本是 20.0.1）。对于“myHobbie”部分，所有图像都使用不透明度因子（-webkit-filter:opacity = 50%），但是当涉及到 Firefox 时，我发现它不支持 webkit。

谁能给我任何其他替代方案，以便它适用于 Firefox 和 chrome？如果可能的话，也适用于 IE。

我的网址是：www.srikarshastry.com/index_vertical.html

提前谢谢你。

【问题讨论】：

请阅读Something on my web site doesn't work. Can I just paste a link to it?
@hotdog1987：始终将相关代码和标记发布在问题本身中，不要只是链接。为什么：meta.stackexchange.com/questions/118392/…
这可以帮助 @hotdog1987 >>----> css-tricks.com/css-transparency-settings-for-all-broswers

标签： jquery html css

【解决方案1】：

首先你做错的是

-webkit-filter:opacity=50%

我只会在带有 webkit 引擎的浏览器中使用，例如 chrome safari 等 more details。在您的情况下，mozilla firefox 使用的是 gecko 不同的引擎。对于壁虎，您需要将不透明度设置为

-moz-opacity:0.5;

或

opacity: 0.5;

所有浏览器的透明度设置如下。

.transparent {

    /* Theoretically for IE 8 & 9 (more valid) */   
    /* ...but not required as filter works too */
    /* should come BEFORE filter */
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

    /* This works in IE 8 & 9 too */
    /* ... but also 5, 6, 7 */
    filter: alpha(opacity=50);

    /* Older than Firefox 0.9 */
    -moz-opacity:0.5;

    /* Safari 1.x (pre WebKit!) */
    -khtml-opacity: 0.5;

    /* Modern!
    /* Firefox 0.9+, Safari 2?, Chrome any?
    /* Opera 9+, IE 9+ */
    opacity: 0.5;
}

更多详情可以参考this link

【讨论】：

很抱歉，它仍然无法正常工作。这是css：#gallery {width: 1024px; height: 853px; margin: 25px auto;} #gallery a {display: block; float: left; margin:0px 15px 15px 15px; position: relative; padding: 1px; -webkit-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5); box-shadow: 0 2px 15px 1px rgba(0, 0, 0, 0.5);} #gallery a img {display: block; -webkit-transition: all 0.5s;} #gallery a img:hover{-webkit-filter: none; filter: none;}
#gallery a img.brightness:hover{-webkit-filter: brightness(0); brightness: 0; -moz-brightness:0;} .transparent{ -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5;}
现在我所做的就是将类附加到我的图像链接中，如下所示：<div class=gallery> <a class="fancybox-effects-d" rel="group" href="images/scrollingImages/sketches/02.jpg"><img src="images/scrollingImages/thumbnails//Sketches/02.jpg" alt="" class="transparent "/></a></div> 然后将“fancybox-effects-d”运行到 jscript 中以获得缓入和缓出效果。跨度>

【解决方案2】：

试试这个不透明度：0.5 for firefox

opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */

【讨论】：

【解决方案3】：

对于 Firefox，只需使用：

opacity:0.5

IE9、Firefox、Chrome、Opera 和 Safari 使用属性 opacity 透明度。 opacity 属性的取值范围为 0.0 - 1.0。一种较低的值使元素更透明。

IE8 和更早的版本使用 filter:alpha(opacity=x)。 x 可以取值从 0 到 100。较低的值使元素更透明。

http://www.w3schools.com/css/css_image_transparency.asp

【讨论】：

【解决方案4】：

试试这个

  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);

  /* Firefox */
  -moz-opacity: 0.5;

  -webkit-opacity: 0.5; /* Chrome & Safari */

  /* Safari 1.x */
  -khtml-opacity: 0.5;

  /* Good browsers */
  opacity: 0.5;

【讨论】：

【解决方案5】：

谢谢大家。它终于奏效了。悬停效果搞砸了。所以，我做了一些改变：

/*Hover effects*/
 #gallery a img:hover {
 filter: alpha(opacity=100);
 opacity: 100;
}
/*Default state for brightness has to be specified specifically*/
#gallery a img.brightness:hover {
-webkit-filter: brightness(0);
brightness: 0;
    -moz-brightness:0;
filter: alpha(opacity=100);
opacity: 100;
}

【讨论】：