maskプロパティは、マスクに関する指定をまとめて行う際に使用します。
maskプロパティで指定できるのは、
mask-image・
mask-mode・
mask-repeat・
mask-position・
mask-clip・
mask-origin・
mask-size・
mask-composite
の値です。
■初期値・適用対象・値の継承
- 初期値
-
mask-imageはnone、
mask-modeはauto、
mask-repeatはno-repeat、
mask-positionはcenter、
mask-clipはborder-box、
mask-originはborder-box、
mask-sizeはauto、
mask-compositeはadd。 - 適用対象
- すべての要素。 SVGでは、defs要素とすべてのグラフィックス要素を除くコンテナ要素に適用される
- 値の継承
- しない
複数のプロパティの値をまとめて指定する際の書式は、以下の通りです。
以下の使用例では、mask-image、mask-position、mask-sizeの値をまとめて指定しています。
このページ内のサンプルでは、以下の200×200ピクセルの画像をマスクレイヤーとして使用します。
ハートの図形部分以外は透明にしてあります。
マスク処理対象となる要素は、以下の300×225ピクセルの画像です。
■使用例
CSSソースは外部ファイル（sample.css）に記述
img.sample1 {
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px;
}
HTMLソース
<p>
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px; を指定<br>
<img class=”sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/tulip.png”>
</p>
ブラウザ上の表示
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px; を指定
■ベンダープレフィックスを付けた場合の使用例
CSSソースは外部ファイル（sample.css）に記述
img.prefix_sample1 {
-webkit-mask: url(‘images/heart_s.png’) repeat left top / 20px 20px;
}
HTMLソース
<p>
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px; を指定<br>
<img class=”prefix_sample1″ src=”https://htmqcom1.wpengine.com/wp-content/themes/twentytwentyone-child/htmq-images/tulip.png”>
</p>
ブラウザ上の表示
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px; を指定