Question

我有一个带有一些文本的div和一个混合混合模式混合的背景图像：变暗。然而，背景图像在文本之外出血。我使用Orbitron-Black作为字体，但我看不出它有所作为！这是我的代码。

＆＃13;

.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
}

＆＃13;

<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>

＆＃13;

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

混合混合模式出血

0 个答案: