cssbackground-size屬性を使用してクールなバックグラウンドストライプを作成する方法は？この記事では、CSSグラデーション、ブレンドモード、background-sizeプロパティでマウスオーバーするときに、背景ストライプの遷移の視覚効果を達(dá)成する方法を示すケースを共有します。

通常、background-size: coverを使用して、背景畫像に要素全體を埋めるようにします。しかし、このケースには、より高度なバックグラウンドサイズの制御が必要です。マウスがホーバーするときに移行する背景ストライプ。効果は次のとおりです（マウスを次の領(lǐng)域にホバリングしてください）：

（ここに動的効果の実証をここに挿入する必要があります。これは元のテキストと一致しています）

この効果を達(dá)成するための鍵は、勾配モードとブレンドモードを巧みに使用することです。シンプルなHTML構(gòu)造から始めましょう：

<div></div>

最初のCSSスタイル：

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

背景ストライプを作成

CSS線形勾配を使用してストライプを作成できます。ストライプの幅が不均一になり、遷移効果の必要性があるため、繰り返し勾配を直接使用することはできません。ここでは、5つの線形勾配の背景を重ねてコンテナの右上隅に配置することにより、5つのストライプをシミュレートします。

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

はストライプの垂直オフセットを制御します?，F(xiàn)在、線形勾配は純粋な黒に設(shè)定されています。これは、その後のマスキングとブレンド効果のためです。背景が繰り返しタイルをとらないようにするには、--gt：--nを設(shè)定する必要があります background-repeat: no-repeat;

div {
  /* ... */
  background-repeat: no-repeat;
}

現(xiàn)在のストライプは重複しており、見ることはほとんど不可能です。

屬性は二重価値構(gòu)文をサポートしており、それぞれ幅と高さを設(shè)定できます。次のコードは、高さのデフォルト値を使用して、各ストライプの幅を設(shè)定します。 background-size background-size高さはautoであるため、ストライプは互いに覆われます。二重値の構(gòu)文を使用して同じ高さを設(shè)定する必要があります：

div {
  /* ... */
  background-size: 60%, 90%, 70%, 40%, 10%;
}

div {
  /* ... */
  background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n);
}

div {
  --h: calc(var(--n) - 5px);
  /* ... */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

div {
  /* ... */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* ... */
}