Limited support 注意が必要。一部のブラウザのみ対応。プロダクション利用は慎重に判断すること。

cross-fade()

cross-fade() は CSS の関数で、2 枚以上の画像を所定の透過度で合成するために使用することができます。 これは単色で色を薄めたり、放射グラデーションとの組み合わせでページの特定の領域を強調させたりするような、数多くの基本的な画像加工に使用することができます。

画像合成クロスフェード

対応ブラウザ

機能 デスクトップ モバイル
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.image.cross-fade
17
79
10
18
9.3
1+対応 (バージョン) 未対応 ※注釈あり サブ機能の解説は MDN Web Docs (CC BY-SA 2.5)
注釈 2件
実装メモ
  • パーセンテージ実装のみで元のデュアルイメージをサポートします。
  • 接頭辞のない `cross-fade()` 関数のサポートについては、バグ 40470742 を参照してください。
注釈 2件
実装メモ
  • パーセンテージ実装のみで元のデュアルイメージをサポートします。
  • 接頭辞のない `cross-fade()` 関数のサポートについては、バグ 40470742 を参照してください。
注釈 2件
実装メモ
  • パーセンテージ実装のみで元のデュアルイメージをサポートします。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5.1)
注釈 2件
実装メモ
  • パーセンテージ実装のみで元のデュアルイメージをサポートします。
  • 接頭辞のない `cross-fade()` 関数のサポートについては、バグ 40470742 を参照してください。
注釈 3件
実装メモ
  • パーセンテージ実装のみでの元のデュアルイメージのサポート。
  • パーセンテージ実装のみで元のデュアルイメージをサポートします。
対応条件
  • ベンダープレフィックス付きで対応: -webkit- (5)

基本構文

CSS 
.element {
  background-image: cross-fade(
    url(image1.png) 75%,
    url(image2.png)
  );
}

ライブデモ

75%/25%blend

CSS 75%/25%blend demo.

プレビュー全画面表示

50%/50%blend

CSS 50%/50%blend demo.

プレビュー全画面表示

Color and. blend

CSS Color and. blend demo.

プレビュー全画面表示

実務での使いどころ

  • 画像の段階的な切り替え

    ホバー時やスクロール位置に応じて、2つの背景画像を滑らかにブレンドする視覚効果を実現します。

注意点

  • ブラウザサポートが限定的で、Safariのみ対応（プレフィックス付き）のため、フォールバック画像を必ず用意してください。

アクセシビリティ

  • 装飾目的のクロスフェードは情報伝達に依存しないようにし、重要な画像にはalt属性を適切に設定してください。

参考リンク