意外的不透明度行为答案

【问题标题】：Unexpected opacity behaviour意外的不透明度行为
【发布时间】：2019-01-24 05:59:06
【问题描述】：

我一直在努力理解我一直在从事的项目中的 CSS 交互。这是一个重新创建它的代码笔和我使用的 css。

.container
  /*background is set to emulate the real use case*/
  background red
  height 400px
  width 600px
  position relative
  display flex
  justify-content center
  align-items center
  opacity 0.9
.blurred
  background-image url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)
  height 100%
  width 100%
  position absolute
  filter blur(7px)
  z-index -1
.text
  font-size 35px
  text-transform uppercase
  color brown
  /*this div is for comparison.
    at 0.9 opacity the white background under it is 
    not visible yet the image under .container is clearly
    visible at 0.9 opacity */
.comparison
  height 400px
  width 600px
  background red
  opacity 0.9

这里的想法是我希望有一个应用了模糊的图像，但它上面还有不模糊的文本。 .container 在技术上不需要设置背景颜色，但为了完全按照我遇到的方式重新创建问题，我将它的背景颜色设置为红色。

因此，根据我的理解，降低 .container 的不透明度会使 .container 及其所有子项更加透明。也就是说，它越低越容易看到所有元素下方的白色背景。我不明白为什么不透明度也会使 .container 完全透明。我可以通过它清楚地看到背景图像。我所期望的是容器充满红色并且几乎不显示里面的图像。相反，.container 没有填充颜色，我可以清楚地看到图像。

我制作了另一个 div 作为比较。它只是一个不透明度为 0.9 的 div，仅此而已。它不会像 .container 那样失去背景颜色。

我希望我已经足够彻底地解释了我的问题。这几天我一直在努力解决这个问题！

【问题讨论】：

标签： html css opacity stylus

【解决方案1】：

背景颜色位于内容的后面而不是顶部，这就是为什么它被称为“背景”的原因。所以你的红色背景在你的.blurred和.text后面。

【讨论】：

我明白了，但为什么它只落后于 0.9 容器不透明度和更低？不透明度为 1 时，背景完全覆盖了里面的图像。为什么不透明度会影响背景是在容器内容的顶部还是在容器内容的后面？这就是我遇到的困难。

【解决方案2】：

当您设置 .banner 类的背景图像时，该元素位于背景颜色之上。您的比较 div 没有失去那么多颜色的原因是因为背景颜色前面没有任何内容。如果你设置 .blurred 的不透明度来降低它的不透明度并抵消竞争，你会得到想要的效果。

【讨论】：

【解决方案3】：

如果您希望红色背景颜色“位于”模糊背景图像的顶部，您可以尝试将其添加为渐变“图像”，如下所示：

background-image linear-gradient(rgba(255,0,0,.9), rgba(255,0,0,.9)), url(https://ak0.picdn.net/shutterstock/videos/2696180/thumb/1.jpg)

【讨论】：