maskプロパティは、マスクに関する指定をまとめて行う際に使用します。
maskプロパティで指定できるのは、
mask-image・
mask-mode・
mask-repeat・
mask-position・
mask-clip・
mask-origin・
mask-size・
mask-composite
の値です。
複数のプロパティの値をまとめて指定する際の書式は、以下の通りです。
以下の使用例では、mask-image、mask-position、mask-sizeの値をまとめて指定しています。
このページ内のサンプルでは、以下の200×200ピクセルの画像をマスクレイヤーとして使用します。
ハートの図形部分以外は透明にしてあります。
マスク処理対象となる要素は、以下の300×225ピクセルの画像です。
img.sample1 {
mask: url(‘images/heart_s.png’) repeat left top / 20px 20px;
}
<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; を指定
img.prefix_sample1 {
-webkit-mask: url(‘images/heart_s.png’) repeat left top / 20px 20px;
}
<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; を指定
