0

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

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

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

先感谢您。

4

5 回答 5

1

首先你做错的是

-webkit-filter:opacity=50%

我只会在带有webkit引擎的浏览器中使用，比如 chrome safari 等更多细节。在您的情况下，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;
}

更多细节你可以参考这个链接

于 2013-04-22T05:58:49.550 回答
0

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

opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
于 2013-04-22T05:47:32.213 回答
0

对于 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

于 2013-04-22T05:45:12.143 回答
0

谢谢你们。它终于奏效了。悬停效果搞砸了。所以，我做了改变：

/*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;
}
于 2013-04-22T16:21:53.860 回答
0

尝试这个

  /* 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;
于 2013-04-22T05:54:53.127 回答