CSS

画像による CSS Masking

More than 5 years have passed since last update.


使用するCSSプロパティ


mask.css

#mask {

/* マスク画像指定 */
mask-image: url('マスク画像URL');
-webkit-mask-image: url('マスク画像URL');

/* マスクの繰り返し指定 */
-webkit-mask-repeat:no-repeat;
mask-repeat: no-repeat;

/* マスクをかける場所指定 */
-webkit-mask-position:center center;
mask-position: center center

}



対応するブラウザ

IE
Firefox
Chrome
Safari
Opera
iOS Safari
Android Browser

×(10.0)
×(21.0)
○(27.0)
○(6.0)
×(12.1)
○(6.0-6,1)
○(4.2)

※()内はバージョン

その他のブラウザ、バージョンによる対応表はこちらを参照


mask画像の用意


▼サンプルマスク画像

_menu-photo.png

マスクしたい形に黒い画像を用意します。


マスクの適用


mask.html

<img id="mask" src="hoge.png" />



mask.css

#mask {

mask-image: url('マスク画像URL');
-webkit-mask-image: url('マスク画像URL');
-webkit-mask-repeat:no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position:center center;
mask-position: center center
}



▼結果

スクリーンショット 2013-06-19 9.40.46.png


備考


  • cssによる画像マスクは、対応しているブラウザが限られる。

  • 画像によるマスクは、canvasでもできるためその他のブラウザで実現したい場合は、canvasでの実装を試して検証する必要がある。