Question

第一次看到不透明和rgba的东西，并试图确定两者是否/为什么不能很好地混合在一起。

基本示例：

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

然后，使用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>

CSS：伪元素之后的半透明文本上的半透明文本

1 个答案: