具有不透明度的容器中没有不透明度的文本[重复]

Question

我有一个带有黑色覆盖层的img。叠加层有一个opacity 和一个白色文本。当我悬停包装器时，可以看到带有不同 opacity 和文本的红色叠加层。一切正常。我唯一的问题是，删除覆盖内文本上的opacity。文字是白色的，但也是透明的。我该如何管理它，将文本放在透明容器中而不会对字母/文本产生透明影响？我知道，如果我把文本放在这个框中并在中心 id 中设置它的样式就可以了。但我想在透明容器中包含文本元素。希望这足够清楚。有什么想法吗？

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: black;
  opacity: 0.4;
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Yoda</h2>
  </div>
  <div class="overlay overlay-red">
    <p>May the force be with you!</p>
  </div>
  <img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic">
</div>

Answer 1

关键部分是：

.overlay-black {
  background: rgba(0,0,0,0.4);
}

请看下面的 sn-p 我相信/希望这是你所期望的。

.wrapper {
  position: relative;
  width: 300px;
  height: 200px;
}

.overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  display: flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.overlay-black {
  background: rgba(0,0,0,0.4);
}

.overlay-red {
  background: red;
  opacity: 0.8;
  display: none;
}

.wrapper:hover .overlay-black {
  display: none;
}

.wrapper:hover .overlay-red {
  display: flex;
}

h2,
p {
  color: white;
}

img {
  width: 100%;
  height: 100%;
}

<div class="wrapper">
  <div class="overlay overlay-black">
    <h2>Yoda</h2>
  </div>
  <div class="overlay overlay-red">
    <p>May the force be with you!</p>
  </div>
  <img src="http://digitalspyuk.cdnds.net/16/38/768x403/gallery-1474472774-yoda-008.jpg" alt="testpic">
</div>