Properti asal topeng CSS

Sebelumnya _ Referensi CSS Lengkap Selanjutnya _

Contoh

Menggunakan mask-origin: border-box;dan 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;
}

Lebih banyak contoh "Coba Sendiri" di bawah ini.

Definisi dan Penggunaan

Properti mask-originmenentukan posisi asal (area posisi topeng) dari gambar lapisan topeng.

Nilai bawaan:	kotak perbatasan
Diwarisi:	tidak
Animasi:	tidak. Baca tentang animasi
Versi: kapan:	CSS3
Sintaks JavaScript:	objek .style.maskOrigin="padding-box"

Dukungan Peramban

Angka-angka dalam tabel menentukan versi browser pertama yang sepenuhnya mendukung properti.

Angka diikuti oleh -webkit- menentukan versi pertama yang berfungsi dengan awalan.

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

Sintaks CSS

Nilai properti

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