広告
maskプロパティは、マスクに関する指定をまとめて行う際に使用します。
maskプロパティで指定できるのは、
mask-image・
mask-mode・
mask-repeat・
mask-position・
mask-clip・
mask-origin・
mask-size・
mask-composite
の値です。
複数のプロパティの値をまとめて指定する際の書式は、以下の通りです。
mask: mask-imageの値 mask-modeの値 mask-positionの値 / mask-sizeの値 mask-repeatの値 mask-originの値 mask-clipの値 mask-compositeの値;
以下の使用例では、mask-image、mask-position、mask-sizeの値をまとめて指定しています。
mask: url('images/heart_s.png') repeat left top / 20px 20px;
このページ内のサンプルでは、以下の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="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="images/tulip.png">
</p>
↓↓↓
mask: url('images/heart_s.png') repeat left top / 20px 20px; を指定
広告