文字・画像にマスクをかける(2)
文字・画像にマスクをかける、の2回目。
前回に続き今回はmask-box-imageプロパティについてご紹介。
前回と同様に下記の画像を使用してみます。
デフォルトではマスクする画像が引き延ばされて表示されます。
楕円でなく正円にしたい場合はwidth、heightの値を同じく指定すると、うまく表示されます。
<div class="mask02"> <img src="sakura2.jpg" /> </div>
.mask02 img {
-webkit-mask-box-image: url(circle.png);
width:400px;
height:400px;
}
