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

Question

我有一个带有黑色叠加层的img。叠加层中包含opacity和白色文本。当我将包装器悬停时，可以看到具有不同opacity和文本的红色叠加层。它工作得很好。我唯一的问题是删除叠加层中文本的opacity。文字是白色的，但也是透明的。如何管理它，将文本放在透明容器中而不会对字母/文本产生透明效果？我知道，如果我将文本从这个框中取出来并将其设置为中心，那么id就可以了。但是我希望在透明容器中包含text元素。希望这很清楚。有什么想法吗？

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

请参阅以下片段我相信/希望这是您的预期。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;