Question

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

.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那样失去背景色。

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

Answer 1

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

Answer 2

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

Answer 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)

意外的不透明行为

3 个答案: