-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

マスク画像は引き伸ばされることなく何度でも繰り返されます。境界ボックスの端に、部分的なマスク画像は置かれません。

公式定義

形式文法

-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