
SafariとChromeのCSS対応:文字や画像にマスクをかける
エ・ビスコム・テック・ラボ
2009-07-09 19:09:02
今回は、レンダリングエンジンにWebkitを利用しているSafari 4とGoogle Chrome 2が独自にサポートした機能の中から「マスク」を紹介する。
マスク機能を利用すると、文字や画像を特定の形で切り抜いたり、テクスチャをかけたりすることができる。
マスクをかける
マスクをかけるには、-webkit-mask-imageまたは-webkit-mask-box-imageプロパティを利用する。ここでは、マスクをかけるために文字と画像を表示して、全体を青色の枠線で囲んだサンプルを用意した。サンプルに表示している風景画像の大きさは350×215ピクセルとなっている。
div{ border: solid 1px blue; }
MASK![]()
※ブラウザで表示を確認する
さらに、上のサンプルの風景画像を円形のマスクで切り抜くため、次のようなマスク画像を用意する。マスク画像は116×107ピクセルの大きさで、白色の部分を透過して24bitのPNGフォーマットで作成してある。

-webkit-mask-imageプロパティでマスク画像を指定し、に対して適用すると、円形が縦横に繰り返しタイリングされたマスクで風景画像が切り抜かれることがわかる。
img{ -webkit-mask-image: url(circle.png); }
※ブラウザで表示を確認する
これに対して、-webkit-mask-box-imageプロパティでマスク画像を指定すると、風景画像に合わせて引き延ばされた円形のマスクで切り抜かれることがわかる。
img{ -webkit-mask-box-image: url(circle.png); }
※ブラウザで表示を確認する
マスクの繰り返しのパターンを指定する
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
ビッグデータ最前線!
-
次の一手はこれだ!
-
M365 活用のセキュリティ対策
-
データの散在と非常率運用がネック
-
IDaaSって何?
-
企業のリスクマネージメント対策に
-
コスト・運用の壁を崩す!
-
デジタルを当たり前と言えるか?
-
いまさら聞けない「PPAP」
-
部分最適だけではダメ
-
明日からではもう遅い?!
-
その先へ
-
SECCON2020レポート第二弾!
-
セキュリティの今を知る
-
ゼロトラストに向けた道のりを支援
-
いまあるデータで身近な業務をDX
-
ネットワークもサービスとして使う
-
DX時代のアプリケーションセキュリティ
-
性能の大幅向上を実現!
-
未来のセキュリティイノベーターへ
-
エンジニアのためのREHL8まとめ
-
連載!プロが語るストレージ戦略
-
漫画で解説:IoTはじめの一歩
-
リモート、オフィス、オンサイト
-
第4回CNBFミートアップレポート
-
連載!プロが語るストレージ戦略
-
次期自治体ネットワーク強靭化へ
-
ハイブリッドクラウドとAI
-
クラウド時代に理想のセキュリティ
-
特集:IT最適化への道
-
SoRとSoEをつなぐDX推進の要
-
連載!プロが語るストレージ戦略
-
厳しい目が向けられる内部不正
-
クラウド活用 虎の巻