画像をユニークな形状で切り抜く！ CSS mask-composite のすべて

CSSの「Miscellaneous」にある「mask-composite」の解説

mask-composite は、マスク画像とマスク対象要素をどのように合成するかを指定するプロパティです。画像やテキストをユニークな形状で切り抜き、さまざまな視覚効果を作成するために使用できます。

プロパティ値

mask-composite は以下の値を受け取ります。

• add: マスク画像とマスク対象要素を単純に重ねます。
• subtract: マスク画像をマスク対象要素から引き算します。
• intersect: マスク画像とマスク対象要素の共通部分のみを表示します。
• xor: マスク画像とマスク対象要素の排他的論理和を表示します。

例

以下の例では、mask-composite を使用して、画像を円形に切り抜いています。

.image {
  width: 200px;
  height: 200px;
  mask-image: url(circle.png);
  mask-composite: intersect;
}

ブラウザサポート

mask-composite は比較的新しいプロパティであり、すべてのブラウザでサポートされているわけではありません。caniuse.com で最新の情報を確認できます。

補足

• mask-composite は mask-image と組み合わせて使用されます。
• mask-composite は、画像だけでなくテキストにも使用できます。
• mask-composite を使用して、さまざまな視覚効果を作成できます。

• mask-composite は、まだ発展途上のプロパティです。今後、新しい値や機能が追加される可能性があります。

mask-composite について何か質問があれば、遠慮なく聞いてください。

CSS mask-composite サンプルコード

<img src="image.jpg" class="image">

.image {
  width: 200px;
  height: 200px;
  mask-image: url(circle.png);
  mask-composite: intersect;
}

テキストをマスクする

<h1>タイトル</h1>

h1 {
  mask-image: url(triangle.png);
  mask-composite: intersect;
  -webkit-mask-composite: intersect;
}

画像を重ね合わせる

<img src="image1.jpg" class="image1">
<img src="image2.jpg" class="image2">

.image1 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
}

.image2 {
  width: 200px;
  height: 200px;
  position: absolute;
  top: 0;
  left: 0;
  mask-image: url(circle.png);
  mask-composite: add;
}

アニメーション

<img src="image.jpg" class="image">

.image {
  width: 200px;
  height: 200px;
  mask-image: url(circle.png);
  mask-composite: intersect;
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  from {
    mask-position: 0 0;
  }
  to {
    mask-position: 100% 100%;
  }
}

その他

• mask-repeat を使用して、マスク画像を繰り返し表示できます。
• mask-position を使用して、マスク画像の位置を調整できます。
• mask-size を使用して、マスク画像のサイズを調整できます。

mask-composite について何か質問があれば、遠慮なく聞いてください。

CSS mask-composite の代替方法

mask-composite を使用できない場合、以下の代替方法を使用できます。

SVG マスクを使用して、画像やテキストをさまざまな形状で切り抜くことができます。SVG マスクは、ベクター画像であるため、解像度に依存せず、あらゆるデバイスで鮮明な表示が可能です。

CSS クリップを使用して、画像やテキストの一部のみを表示することができます。CSS クリップは、矩形、円形、楕円形などの単純な形状に限定されます。

Canvas を使用して、複雑な形状で画像やテキストを切り抜くことができます。Canvas は、JavaScript を使用してプログラムする必要があるため、より高度な技術が必要です。

画像編集ソフト

Photoshop や GIMP などの画像編集ソフトを使用して、画像を好きな形状に切り抜くことができます。この方法は、画像を一度切り抜けば、CSS でのコーディングは不要になります。

それぞれの方法のメリットとデメリット

mask-composite の代替方法について何か質問があれば、遠慮なく聞いてください。