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

Question

我有一个 img 带有黑色覆盖层。叠加层中有一个 opacity 和一个白色文本。当我将鼠标悬停在包装纸上时，可以看到带有不同 opacity 和文本的红色覆盖层。一切正常。我唯一的问题是，删除覆盖内文本上的 opacity。文本是白色的，但也是透明的。我如何管理它，将文本放在透明容器中而不对 letters/text 产生透明影响？我知道，如果我将文本从这个框中取出并将其样式设置为中心 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);
}

请参阅下面的代码片段 I believe/hope 这是您所期望的。

.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>

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

Text without opacity within a container with opacity

html

css

opacity