文字・画像にマスクをかける(1)
CSS3のmask-box-imageプロパティ、mask-imageプロパティを使用すると、
文字・画像にマスク効果をかけることができます。
今回はmask-imageプロパティについて。
試しに下の写真を円の画像（透過PNG画像）でマスクしてみます。
<div class="mask"> <img src="/sakura2.jpg"/> </div>
.mask img {
-webkit-mask-image:url(./circle.png);
}
テキストも同様にマスクできます。
下記の小さめの円でマスクすると、
.masktext {
-webkit-mask-image:url(../smallcircle2.png);
font-size:80px;
font-weight:bolder;
}
この文章はダミーです。
このようになります。
また、繰り返し・表示位置の指定ができます。
指定の仕方は背景画像の指定の時と同様に、repeat-x、repeat-yなどの値を指定します。
.mask2 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:repeat-y;
}
.mask3 img {
-webkit-mask-image:url(../circle.png);
-webkit-mask-repeat:no-repeat;
-webkit-mask-position:center bottom;
}
※使いようによっては面白い表現ができそうですが、まだSafari・Chrome系のみ対応なのが残念なところ。
他ブラウザの対応を望みたいです。
