css - 混合图像叠加层和带背景的文本

Question

是否可以将文本的背景颜色与图像的叠加层混合？

覆盖层和文本背景的背景颜色完全相同，rgba(0,0,0,0.7) 但是当它们重叠时，它会变暗。

谢谢！

<div class="banner">
  <div class="header__text-box">
    <h1 class="heading-primary">
      <span class="heading-primary--main">Frontend</span>
      <span class="heading-primary--sub">Developer</span>
    </h1>
  </div>
</div>



.banner {
  position: relative;
  background: url(https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/847d1434030470.56c3460d9454b.jpg?raw=true)
    no-repeat;
  background-size: cover;
  background-position: center center;

  &:before {
    position: absolute;
    content: "";
    background: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 0;
    left: 0;
    clip-path: polygon(0 0, 100% 0, 60% 100vh, 0 100%);
    z-index: 1;
  }
}



.heading-primary {
  &--main {
    color: #d9b200;
    display: inline-block;
    font-family: sans-serif;
    font-size: 56px;
    font-weight: 400;
    letter-spacing: 1.2rem;
    padding-left: 50px;
    text-transform: uppercase;
    background-color: rgba(0, 0, 0, 0.7);
  }
}

带代码的 Codepen：https ://codepen.io/monica-fidalgo/pen/gOabQgx

标签： css

Answer 1

如果我理解这个问题，你可以给文本一个rgba值：

.bg-img{
    background: url(https://placekitten.com/400/300) center/cover;
    width: 400px;
    height: 300px;
}

.pane{
    width: 50%;
    height: 50%;
    background-color: rgba(0,0,0,0.7);
    display: flex;
    align-items:center;
    justify-content:center;
    margin: 20px 0 0 20px;
}

h2{
    color: rgba(255,255,255,0.4);
}

<div class="bg-img">
    <div class="pane">
        <h2>This is some text</h2>
    </div>
</div>