在Chrome中设置CSS的不透明度

Question

我已经尝试了以下方法： （实际上是为了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();

在Chrome/Safari中仍然没有任何显示。

我做错了什么？

- dell

Answer 1

opacity 在 Chrome、Safari 和 Firefox 中都可以使用。而 -moz 和 -khtml 语法只是用来支持早期版本的这些浏览器。

我之前从没见过 -webkit-opacity 样式，并且似乎找不到任何文件证明它的存在。建议你要么完全删除它，要么修复语法错误：将 '-webkit-opacity:' 改为 '-webkit-opacity'（去掉冒号）。

如果仍然无效，请检查一下 opts.overlayOpacity 的值是否正确，应该是类似于 0.5 而不是 50 或者 50%。

- Chris Van Opstal

---

当然，我认为50%等同于0.5，但是你的评论节省了我的一些时间。;) - lapo