このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docsコミュニティーについてもっと知り、仲間になるにはこちらから。
-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 に値が見つかりません！形式文法
-webkit-mask-box-image =
<'mask-border-source'>||
<'mask-border-slice'>[ /<'mask-border-width'>?[ /<'mask-border-outset'>]?]?||
<'mask-border-repeat'>||
<'mask-border-mode'>
<mask-border-source> =
none|
<image>
<mask-border-slice> =
[<number>|<percentage>]{1,4}fill?
<mask-border-width> =
[<length-percentage>|<number>|auto]{1,4}
<mask-border-outset> =
[<length>|<number>]{1,4}
<mask-border-repeat> =
[stretch|repeat|round|space]{1,2}
<mask-border-mode> =
luminance|
alpha
<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<length-percentage> =
<length>|
<percentage>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
例
画像の設定
.exampleone { -webkit-mask-box-image: url("mask.png");}画僧のオフセットと塗りつぶし
.exampletwo { -webkit-mask-box-image: url("logo.png") 100 100 0 0 round round;}仕様書
Not part of any standard.
ブラウザーの互換性
関連情報
mask,mask-origin,-webkit-mask-attachment,mask-clip,mask-image,-webkit-mask-composite,mask-repeat