SafariとChromeのCSS対応:文字や画像にマスクをかける

エ・ビスコム・テック・ラボ
2009-07-09 19:09:02
  • このエントリーをはてなブックマークに追加

マスクの繰り返しのパターンを指定する

 -webkit-mask-imageプロパティで指定したマスク画像は、縦横に繰り返しタイリングして適用される。このとき、-webkit-mask-repeatプロパティを利用すると繰り返しのパターンを指定することが可能だ。

 たとえば、マスクを横方向にだけ繰り返して適用するには、「-webkit-mask-repeat:repeat-x」と指定する。

マスクを横方向にだけ繰り返すようにしたもの(画像をクリックすると拡大します) マスクを横方向にだけ繰り返すようにしたもの(画像をクリックすると拡大します)
img{
-webkit-mask-image: url(circle.png);
-webkit-mask-repeat: repeat-x;
}
ブラウザで表示を確認する

 指定できる値は以下の4種類となっている。これらの値は背景画像の繰り返しパターンを指定するbackground-repeatプロパティと同じだ。

-webkit-mask-repeatプロパティの値
繰り返しのパターン
repeat縦横に繰り返す
repeat-x横方向に繰り返す
repeat-y縦方向に繰り返す
no-repeat繰り返さない

マスクの表示位置を指定する

 マスクの表示位置は、-webkit-mask-positionプロパティで指定することができる。指定できる値は背景画像の表示位置を指定するbackground-positionプロパティと同じで、横方向と縦方向の位置を半角スペースで区切って指定する。

 たとえば、「-webkit-mask-position:right bottom」と指定すると、マスクは適用先の右下に揃えて表示される。なお、次のサンプルではマスクの表示位置をわかりやすくするため、「-webkit-mask-repeat:no-repeat」と指定してマスクを繰り返しタイリングしないように指定している。これで、円形のマスクを使って風景画像の右下だけを切り抜くことができる。

風景画像の右下を切り抜いたもの(画像をクリックすると拡大します) 風景画像の右下を切り抜いたもの(画像をクリックすると拡大します)
img{
-webkit-mask-image: url(circle.png);
-webkit-mask-repeat: repeat-x;
-webkit-mask-position: center bottom;
}
ブラウザで表示を確認する
このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]