CSS mask-orijinal Özellik

Örnek

kullanma mask-origin: border-box;ve mask-origin: content-box;:

.mask1 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: border-box;
mask-origin: border-box;
}

.mask2 {
width: 600px;
height: 400px;
background: green;
border: 20px solid red;
padding: 50px;
-webkit-mask-image: url(w3logo.png);
mask-image: url(w3logo.png);
-webkit-mask-size: 80%;
mask-size: 80%;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-origin: content-box;
mask-origin: content-box;
}

Aşağıda daha fazla "Kendiniz Deneyin" örnekleri.

Tanım ve Kullanım

Özellik mask-origin, bir maske katmanı görüntüsünün başlangıç konumunu (maske konumu alanı) belirtir.

Varsayılan değer:	kenarlık kutusu
Miras:	Hayır
canlandırılabilir:	Hayır. Canlandırılabilir hakkında bilgi edinin
Sürüm:	CSS3
JavaScript sözdizimi:	nesne .style.maskOrigin="doldurma kutusu"

Tarayıcı Desteği

Tablodaki sayılar, özelliği tam olarak destekleyen ilk tarayıcı sürümünü belirtir.

-webkit- tarafından takip edilen sayılar, bir önekle çalışan ilk sürümü belirtir.

Property
mask-origin	4.0 -webkit-	79.0 -webkit-	53.0	4.0 -webkit-	15.0 -webkit-

CSS Sözdizimi

Mülk değerleri

Value	Description
border-box	The position is relative to the border box. This is default
content-box	The position is relative to the content box
padding-box	The position is relative to the padding box
margin-box	The position is relative to the margin box
fill-box	The position is relative to the object bounding box
stroke-box	The position is relative to the stroke bounding box
view-box	Use the nearest SVG viewport as reference box
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit