視覚的なテクスチャ コンテンツ

ウェブ機能: マスク

概要

要素にリアルな風化やテクスチャ パターン（グランジ、ノイズ、紙のテクスチャなど）を適用するには、CSS マスキング（mask-image）と繰り返しのテクスチャ画像を使用します。これにより、テクスチャを上に重ねるだけでなく、コンテンツの一部を半透明にすることで、コンテンツ自体にテクスチャを適用できます。これにより、よりリアルな物理マテリアルの外観が作成されます。

実装

テクスチャ パターンを適用するには:

これは、リアルなテクスチャを作成する最も一般的な方法です。

.weathered-element {
  /* MANDATORY: Use vendor prefix for wider support in older browsers */
  -webkit-mask-image: url('grunge-pattern.png');
  -webkit-mask-repeat: repeat; /* Repeat the pattern to fill the area */
  -webkit-mask-size: 300px; /* Control the scale of the texture */

  /* Standard property for modern browsers */
  mask-image: url('grunge-pattern.png');
  mask-repeat: repeat;
  mask-size: 300px;
}

方法 2: CSS グラデーションを使用して幾何学模様を作成する

CSS グラデーションを使用してパターンを生成できます。これは自己完結型であり、外部画像ファイルは必要ありません。

.patterned-element {
  --checkerboard-gradient: 
    linear-gradient(45deg, #000 25%, transparent 25%), 
    linear-gradient(-45deg, #000 25%, transparent 25%), 
    linear-gradient(45deg, transparent 75%, #000 75%), 
    linear-gradient(-45deg, transparent 75%, #000 75%);

  /* Apply a checkerboard pattern as a mask */
  -webkit-mask-image: var(--checkerboard-gradient);
  -webkit-mask-size: 20px 20px;
  -webkit-mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
  
  mask-image: var(--checkerboard-gradient);
  mask-size: 20px 20px;
  mask-position: 0 0, 0 10px, 10px -10px, -10px 0px;
}

アルファ マスキング モードと輝度マスキング モード

デフォルトでは、CSS マスクは mask-mode: match-source を使用します。つまり、ブラウザは、提供するソースの種類に基づいて、マスクのアルファ チャンネル（透明度）または輝度（明るさ）を使用するかどうかを自動的に決定します。

マスクソースのタイプ デフォルトのマスクモード マスキング動作
インライン SVG <mask> 要素 luminance 不透明度は色の明るさによって決まります。白はコンテンツを表示し、黒はコンテンツを非表示にし、グレーは半透明にします。
直接画像ファイル（PNG、SVG ファイルなど） alpha 不透明度は透明度によって決まります。不透明な部分はコンテンツを表示し、透明な部分はコンテンツを非表示にします。
CSS グラデーション alpha 不透明度は透明度によって決まります。不透明な色（black など）はコンテンツを表示し、透明な色はコンテンツを非表示にします。

代替戦略

ブラウザが mask-image または接頭辞付きのバージョンをサポートしていない場合:

  • 要素はテクスチャなしで表示されます（単色で塗りつぶされます）。
  • テクスチャがなくてもコンテンツが読み取れることを確認します（プログレッシブ エンハンスメント）。
  • 背景画像やオーバーレイをフォールバックとして使用してテクスチャをシミュレートできますが、コンテンツ自体の透明度には影響しません。
/* Fallback: Use a background image for browsers without mask support */
@supports (not (mask-image: url(x))) and (not (-webkit-mask-image: url(x))) {
  .weathered-element {
    /* Fallback adds texture on top or behind, depending on implementation */
    background-image: url('grunge-pattern.svg');
    background-color: #fff; /* Ensure background is solid if needed */
  }
}