0

我有一个带有一些文本的 div 和一个背景图像，我正在使用 mix-blend-mode: 变暗。然而，背景图像在文本之外流血。我使用 Orbitron-Black 作为字体，但我看不出有什么不同！这是我的代码。

.big-text {
  width: 100%;
  height: 500px;
  float: left;
  margin: 80px 10% 0 10%;
  position: relative
}

.text-parallax {
  background: url('https://iam.theweb.engineer/assets/text-1.jpg') no-repeat 0 0;
  display: inline-block
}

.text-parallax-content {
  font-family: 'Orbitron-Black', sans-serif;
  font-weight: 700;
  font-size: 8.8em;
  line-height: 120%;
  overflow: hidden;
  margin-bottom: 0;
  background: #232323;
  color: #fff;
  mix-blend-mode: darken;
  -ms-mix-blend-mode: darken
}
<div id="home" class="section">
  <section class="big-text">
    <div class="container">
      <div class="text-parallax" data-stellar-background-ratio="0.86">
        <div class="text-parallax-content">Bleeding Text</div>
      </div>
    </div>
  </section>
</div>

我在这里做了一个小提琴。 小提琴

4

0 回答 0