html - 将子容器的不透明度与父容器分开？我希望孩子不受影响

Question

我试图让我的容器overlay的不透明度为 0.7，但要让我的孩子text保持 1.0 的不透明度。如果我尝试直接在子元素中设置不透明度，则没有任何变化。如何将text不透明度更改为 1.0，同时保持overlay0.7？

CSS：

.overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #2a7de1;
  overflow: hidden;
  width: 100%;
  height: 0;
  transition: .5s ease;
  opacity: 0.7;
}
.text {
  color: white;
  font-size: 1.7vw;
  position: absolute;
  top: 90%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'karla';
}

HTML 示例：

   <div class="contained1"> 
  <img class="resize" src="https://i.imgur.com/D2hr3Ma.jpg"> 
    <div class="overlay">
    <div class="text">Blog Illustrations</div>
  </div>
</div>

编解码器： https ://codepen.io/daniel-albano/pen/vYOKRzp ?editors=1100

标签： htmlcss