在 CSS 中为 Chrome 设置不透明度

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/1757425/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 21:16:48  来源:igfitidea点击:

Setting Opacity in CSS For Chrome

cssgoogle-chromeopacity

提问by dell

I've tried the following:

我尝试了以下方法:

(this is actually for fancybox, as the overlay does not show in chrome/safari:

(这实际上是为fancybox 设计的,因为在chrome/safari 中不显示叠加层:

   $("#fancy_overlay").css({<br />
                    'background-color': opts.overlayColor,<br />
                    'opacity': opts.overlayOpacity,<br />
                    '-moz-opacity': opts.overlayOpacity,<br />
                    '-khtml-opacity': opts.overlayOpacity,<br />
                    '-webkit-opacity:' : opts.overlayOpacity<br />
    }).show();

And still nothing (in chrome/safari)

仍然什么都没有(在 chrome/safari 中)

What am I doing wrong?

我究竟做错了什么?

回答by Chris Van Opstal

opacityshould work for chrome/safari/firefox. The -moz and -khtml syntaxes are only used to support the much older versions of these browsers.

opacity应该适用于 chrome/safari/firefox。-moz 和 -khtml 语法仅用于支持这些浏览器的旧版本。

I've never run across the -webkit-opacitystyle before and can't seem to find any documentation that says it exists. I would try removing it entirely or fixing the syntax bug you have in there: '-webkit-opacity:'to '-webkit-opacity'(without the trailing colon).

我以前从未遇到过这种-webkit-opacity风格,似乎找不到任何说明它存在的文档。我会尝试完全删除它或修复你在那里的语法错误:'-webkit-opacity:'to '-webkit-opacity'(没有尾随冒号)。

If that doesn't work try printing the value of opts.overlayOpacity. Make sure it's something like 0.5and not 50or 50%.

如果这不起作用,请尝试打印opts.overlayOpacity. 确保它类似于0.5and 不是50or 50%