Question

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

任何人都可以给我任何其他选择，以便它适用于firefox和chrome吗？如果可能，也适用于IE。

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

提前谢谢。

Answer 1

首先，你做错了是

-webkit-filter:opacity=50%

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

-moz-opacity:0.5;

OR

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

了解更多详情

Answer 2

对于firefox，只需使用：

opacity:0.5

IE9，Firefox，Chrome，Opera和Safari使用属性不透明度   透明度。 opacity属性的值可以是0.0 - 1.0。一个   较低的值使元素更透明。

IE8及更早版本使用filter：alpha（opacity = x）。 x可以取值   从0到100.较低的值使元素更加透明。

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

Answer 3

尝试此不透明度：0.5 for firefox

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

Answer 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;

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

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

5 个答案: