我是 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
先感谢您。
首先你做错的是
-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;
}
更多细节你可以参考这个链接
试试这个不透明度：0.5 for firefox
opacity:0.5;
filter:alpha(opacity=50); /* For IE8 and earlier */
对于 Firefox，只需使用：
opacity:0.5
IE9、Firefox、Chrome、Opera 和 Safari 使用属性 opacity 来实现透明度。opacity 属性的取值范围为 0.0 - 1.0。较低的值使元素更透明。
IE8 和更早的版本使用 filter:alpha(opacity=x)。x 可以取 0 - 100 之间的值。较低的值使元素更透明。
谢谢你们。它终于奏效了。悬停效果搞砸了。所以，我做了改变：
/*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;
}
尝试这个
/* 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;