-webkit-mask-box-image
非標準: この機能は標準ではなく、標準化の予定もありません。公開されているウェブサイトには使用しないでください。ユーザーによっては使用できないことがあります。実装ごとに大きな差があることもあり、将来は振る舞いが変わるかもしれません。
-webkit-mask-box-image はマスク画像を要素の境界ボックスに設定します。
構文
-webkit-mask-box-image: <mask-box-image> [<top> <right> <bottom> <left> <x-repeat> <y-repeat>]
ここで、
- <mask-box-image>
-
<uri>| <gradient> | none - <top> <right> <bottom> <left>
-
<length> | <percentage> - <x-repeat> <y-repeat>
-
repeat | stretch | round | space
値
- <uri>
-
マスク画像として使用する画像リソースの位置です。
- <gradient>
-
マスク画像として使用する
-webkit-gradient関数です。 - none
-
境界ボックスにマスク画像がないことを示すために使用します。
- <length>
-
マスク画像のオフセットの大きさです。利用可能な単位は
<length>を参照してください。 - <percentage>
-
マスク画像のオフセットで、境界ボックスの対応する長さ（幅または高さ）に対するパーセント値です。
- repeat
-
マスク画像は、境界ボックスの範囲に必要な回数だけ繰り返されます。マスク画像が境界ボックスに均等に配置できない場合は、部分画像を含むことがあります。
- stretch
-
マスク画像は、境界ボックスを正確に含むように引き伸ばされます。
- round
-
マスク画像は多少引き伸ばされ、教秋ボックスの端にマスク画像の一部が残らないように繰り返されます。
- space
-
マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。
公式定義
DB に値が見つかりません！
形式文法
Error: could not find syntax for this item
例
画像の設定
css
.exampleone {
-webkit-mask-box-image: url("mask.png");
}
画僧のオフセットと塗りつぶし
css
.exampletwo {
-webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;
}
仕様書
Not part of any standard.
ブラウザーの互換性
BCD tables only load in the browser