CSS クロスフェード() を使用して半透明の背景画像効果を実現するサンプルコード

1. 要件の説明

特定の要素については、背景background-imageを半透明にしたいが、テキストやアイコンなど、要素内の他のコンテンツは不透明のままにしたいとします。

単色の背景や CSS グラデーションの背景であれば、扱いは簡単です。RGBA またはhslaカラーrgbaを使用するだけです。

ただし、 url()背景画像の場合は、どうしようもないようです。

インライン<img>画像であれば、扱いは簡単です。フィルター、マスク、 opacity設定のいずれでも、効果を得ることができます。ただし、これは背景画像であり、上記のすべての方法はテキストの正常な表示に影響します。

多くの人は、たとえば::before / ::after疑似要素の使用を思いつくと思います。

。箱 {
   位置: 相対的;
   zインデックス: 0;
}
.box::before {
   コンテンツ： '';
   位置: 絶対;
   左: 0; 右: 0; 上: 0; 下: 0;
   背景: url(xxx.jpg) 繰り返しなし 中央 / 含む;
   Zインデックス: -1;
   不透明度: .5;
}

リアルタイム効果は以下のとおりです（効果がない場合、原作者のZhang Xinxuをご覧ください）。

投稿者: zhangxinxu

ただし、この方法は冗長かつコストがかかりすぎる (スタック コンテキストが大量に作成され、サイズを調整する必要がある) ため、大規模に使用することはできません。

それを実装する良い方法はありますか?

cross-fade()画像関数を使用してみてください。

2. cross-fade() は背景画像を半透明にする

cross-fade()関数を使用すると、2 つの画像を半透明にブレンドできます。

例えば：

<div class="クロスフェードイメージ"></div>

.クロスフェードイメージ{
    幅: 300ピクセル; 高さ: 300ピクセル;
    背景: 繰り返しなし 中央 / 含む;
    背景画像: -webkit-cross-fade(url(1.jpg), url(2.jpg), 50%);
    背景画像: クロスフェード(url(1.jpg), url(2.jpg), 50%);   
}

効果は下図のようになります。

画像2.jpgは、画像1.jpgと 50% の透明度で混合されてレンダリングされます。

上記の例では、 cross-fade()関数の従来の構文を使用しています。構文は次のとおりです。

<dfn id="ltimage-combination">
<画像の組み合わせ>
</dfn> = クロスフェード( <画像>, <画像>, <パーセンテージ> )

ここで、 <percentage>は透明度を指し、2 番目の画像の透明度のみを変更します。最終的な効果は、最初の画像が完全に不透明になり、2 番目の画像が半透明になることです。

cross-fade()画像関数のパーセンテージ値に関しては、次の画像の透明度のみを変更します。かなり前にテスト用のデモページを作成しました。こちらをクリックしてください: CSS3 クロスフェード属性透明度オブジェクトテスト

スクリーンショットは次のとおりです。

cross-fade()関数の本来の目的は、複数の画像を半透明に重ね合わせることですが、実際の開発ではそのようなシナリオに遭遇することはほとんどありません。そのため、 cross-fade()は単一の背景画像の半透明効果を制御するのに適しています。

実装原理は非常にシンプルです。最初の画像には透明な画像を使用し、2 番目の画像にはターゲット画像を使用します。

例えば：

ダークモードでは背景画像が明るすぎます。背景画像の明るさを調整したいです。cross cross-fade()は、次の CSS コードで実装されています (幅と高さの設定の CSS は省略されています)。

。暗い {
    /* フォールバック、IE および Firefox ブラウザ*/
    背景画像: url(2.jpg);
    --transparent: url(data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    /* 最新バージョンの Safari ではプライベートプレフィックスは不要になりました */
    背景画像: クロスフェード(var(--transparent), url(2.jpg), 40%);
    /* カスタム プロパティを使用する場合は、-webkit- ステートメントを private プレフィックスなしのステートメントの下に配置する必要があります */
    背景画像: -webkit-cross-fade(var(--transparent), url(2.jpg), 40%);

    背景サイズ: カバー;
}

効果は以下のとおりです。

とてもシンプルですね。疑似要素の実装よりもはるかに信頼性が高いのではないでしょうか。対応するデモはここにあります。

cross-fade()は本質的に<image>画像データタイプであり、 url()イメージ、グラデーション イメージ、および image-set() 関数のプロパティであり、 border-image 、 mask-imageなどの属性で使用できます。

したがって、 url()関数の代わりにcross-fade()関数を使用して背景画像の半透明効果を実現するのが、最もコストが低く、最適な方法です。

3. 優れたモバイル互換性

cross-fade()関数は、iOS 5 や Android 4.4 など、Webkit ブラウザーで長い間サポートされてきました。ただし、次の図に示すように、プライベート プレフィックスを設定する必要があります。

そのため、モバイルデバイスでも安心してご利用いただけます。PCに関しては、IEブラウザを考慮する必要がなければ安心してご利用いただけます。IEを考慮する必要があっても問題ありません。唯一の違いは、背景画像が依然として完全に不透明であり、視覚的な体験がわずかに低いことです。

この世に役に立たない CSS プロパティなど存在しません。ただ、適切なシナリオに遭遇していないだけです。独身の皆さんと同じように、適切な相手にまだ出会っていないだけです。

また、 cross-fade()関数は CSS 仕様に追加された後、より柔軟で強力な新しい構文になりましたが、現在サポートしているブラウザがないため、この記事では紹介しません。

CSS クロスフェード() を使用して背景画像の半透明効果を実現するサンプルコードに関するこの記事はこれで終わりです。CSS クロスフェード() 背景画像の半透明効果の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。