html - CSS:半透明文本在半透明上:伪元素之后

Question

刚刚第一次看到不透明度与 rgba 的对比，并试图确认这两者是否/为什么不能像它看起来的那样很好地混合。

基本示例:

我有一个带背景图片的全屏 div。该 div 有一个深色覆盖层，使用 :after pseudo 和深色十六进制背景颜色和不透明度。

然后我使用 z-index 和 rgba 在顶部有一个绝对定位的浅色标题。

当我使用混合的十六进制 BG 和 rgba 标题时，标题看起来像纯灰色 - 好像标题是透明的，但黑暗的 :after 伪元素在标题所在的位置失去了透明度。

通过将标题更改为十六进制和不透明度，而不是 rgba，一切都是透明的，完全符合设计的目的。

谁能解释为什么将两者混用会造成麻烦？我很难找到合适的 Google/Stack 搜索来获得明确的答案。

HTML 的删节版

<section id="banner">
  <div class="inner">
    Some content
  </div>
  <h2 class="transparent">The heading in question</h2>
</section>

精简的 CSS:

#banner {
  position:absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('pathto/image.jpg');
  background-size: cover;  
}

#banner:after {
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: #000;
  opacity: 0.35;
}

#banner .inner {
  z-index: 2;
}

.transparent {
  z-index: 2;
  position: absolute;
  bottom: 0;
  right: 0;
  color: rgba(255,255,255,.5);
}

Answer 1

试试这个方法...

#banner {
  position:absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bb/Pigeon_Point_Lighthouse_%282016%29.jpg/220px-Pigeon_Point_Lighthouse_%282016%29.jpg');
  background-size: cover;  
}

#banner:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0,0,0,0.55);
}

#banner .inner {
  z-index: 2;
}

.transparent {
  z-index: 2;
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: 53px;
  color: rgba(255,255,255,.25);
}

<section id="banner">
  <div class="inner">
    Some content
  </div>
  <h2 class="transparent">The heading in question</h2>
</section>