文字・画像にマスクをかける(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;
}

コメントを投稿する

SPONSORED LINK

CATEGORY

RECOMMEND BOOKS

OTHER

あわせて読みたい

トップへ戻る