0

mix-blend-mode: darken でブレンドしているテキストと背景画像を含む div があります。ただし、背景画像がテキストの外側ににじみ出ています。フォントとして 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