具有不透明性的容器内没有不透明性的文本

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);
}

请参阅下面的片段，我相信/希望这是您所期望的。

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

.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%;
}