设置不透明度的背景在 Chrome 和 Opera 中是实心而不是透明的答案

【问题标题】：Background with opacity set is solid and not transparent in Chrome and Opera设置不透明度的背景在 Chrome 和 Opera 中是实心而不是透明的
【发布时间】：2017-06-15 23:54:28
【问题描述】：

我有一个带有文本和背景的 div，向下滚动后会越过主滑块。我想要一些透明度。在 Firefox 中一切正常，该层是透明的并设置了一些不透明度。但是在 chrome 和 opera 中它是实心的，并且在下面看不到滑块。我用：

  background:rgba(255,255,255,0.5);

i 事件尝试使用透明 PNG，但它也很可靠。Problem preview

如何在 Chrome 和 Opera 中使背景透明？

【问题讨论】：

把上面的代码改成 background-color: rgba(255,255,255,0.5);看看它是否有效。
您的问题一定是css冲突，请参阅jsfiddle.net/o17pkhgo - background 属性确实有效。您的网站太复杂了，我无法说出哪里出了问题，尤其是滑块动画使得检查更改变得非常困难。
问题溢出：隐藏；
很高兴知道它已修复。 :)
请html、css

标签： html css google-chrome

【解决方案1】：

我知道这是一个老问题，但寻找同样的问题，这对我来说是最重要的。所以我遇到了同样的问题 - 在 Firefox 中完美运行，但在 Chrome 上完全没有不透明性。我所做的工作及其完美（至少现在）它可以从 RGBA 颜色更改为 HSLA 颜色。就我而言，更改了以下内容：

background-color: rgba(0, 0, 0, 0.75);

到

background-color: hsla(0, 0%, 0%, 0.75);

我不知道为什么 chrome 更喜欢 HSL 颜色和不透明度。同样值得考虑的一点是，较新的浏览器版本支持 HSL 颜色。

【讨论】：