0

「.box-with-text」の「背景色」を削除すると、テキストの塗りつぶしが機能しないという問題がありました。

.box-with-text {
  text-transform: uppercase;
  font: bold 6rem Open Sans, Impact;
  background: black;
  color: white;
  mix-blend-mode: multiply;
}

@keyframes stripes {
  to {
    background-size:100% 100%;
  }
}
.wrapper {
  max-width: 300px;
  margin: 0 auto;
}
.container {
  display: flex;
  background: linear-gradient( crimson , crimson) white no-repeat 0 0;
  background-size: 0 100%;
  animation: stripes 5s;
  animation-fill-mode: forwards;
  text-align: center;
}

コデペン

4

1 に答える 1

0

ここで「機能しない」という意味を推測しています。探しているのは、アニメーションによって赤で塗りつぶされた白い背景に白いテキストを表示することであると想定しています (これを説明するには、質問を拡張してください)これはあなたがやろうとしていることではありません）。

この効果を実現するには、別のブレンド モードを使用する必要があります。これは、前景を黒、背景を白にして、スクリーン ブレンド モードを使用することで実現できます。

.box-with-text {
    text-transform: uppercase;
    font: bold 6rem Open Sans, Impact;
    background: white;
    color: black;
    mix-blend-mode: screen;
}

参照: http://codepen.io/Godwin/pen/oLYYvr?editors=1100

于 2016-06-21T21:32:25.203 に答える