Question

我正在努力理解为什么将opacity属性应用到具有背景图像的div时，该属性似乎会影响html中的某些文本，而不会影响其他文本。

这是我标记的基本布局。

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.background_image {
  width: 100%;
  height: 100%;
  /* content: ""; */
  background-image: url("../images/matador.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: -870px;
  opacity: 0.6;
}

.containers {
  display: flex;
  justify-content: space-around;
}

.text-container {
  margin: 40px;
  font-family: 'Space Mono', monospace;
  letter-spacing: .075em;
  font-size: 1.5em;
}

<body>
  <div class="background-image"></div>
  <!--(this div holds nothing)-->
  <div class="containers"></div>
  <!--(this div holds more divs and h2 tags)-->
  <div class="text-containers"></div>
  <!--(this div holds more divs and p tags)-->
  </body>

基本上，我希望不透明度仅影响背景图像，以使“ .text-container”中的文本更清晰。不透明度似乎不影响其他“ .container”元素，并且仅保留页脚/导航。任何指导将不胜感激。

不透明度属性会影响某些元素，而不会影响其他元素

0 个答案: