103 of 313 menu

Properti mask

Properti mask adalah singkatan untuk semua properti masking dan memungkinkan untuk mengatur: gambar masker, posisinya, ukuran, mode campuran, dan parameter lainnya.

Merupakan properti singkatan untuk properti-properti berikut: mask-image, mask-position, mask-size, mask-repeat, mask-origin, mask-clip, mask-mode, mask-composite.

Sintaks

selektor {
	mask: [mask-image] [mask-position] / [mask-size]
	      [mask-repeat] [mask-origin] [mask-clip]
	      [mask-mode] [mask-composite];
}

Nilai

Nilai	Deskripsi
`none`	Menonaktifkan masking (nilai default)
`url()`	Path ke gambar masker (SVG, PNG)
`linear-gradient()`	Gradien linier sebagai masker
`radial-gradient()`	Gradien radial sebagai masker
`position`	Posisi masker (top, center, 50% 50%, dll.)
`size`	Ukuran masker (cover, contain, 100px 50px)
`repeat`	Pengulangan masker (no-repeat, repeat-x, space)
`mode`	Mode campuran (alpha, luminance, match-source)
`composite`	Komposisi masker (add, subtract, intersect, exclude)

Mempersiapkan Gambar

Misalkan kita memiliki gambar alam yang akan kita potong, dan gambar SVG hati dan panah, yang akan kita gunakan untuk memotong:

<img src="image.jpg" width="500">
<br>
<img src="heart.svg" width="300">
<br>
<img src="arrow.svg" width="300">

:

Contoh . Masker Gambar

Mari kita terapkan masker bentuk hati pada gambar kita:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url("heart.svg") center/300px no-repeat;
}

:

Contoh . Posisi Masker

Masker hati di sudut kiri atas:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left top/150px no-repeat;
}

:

Contoh . Posisi Masker

Masker hati di sudut kanan bawah:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") right bottom/150px no-repeat;
}

:

Contoh . Posisi Masker

Masker hati di tengah kiri:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center/150px no-repeat;
}

:

Contoh . Posisi Masker

Masker hati di tengah:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/150px no-repeat;
}

:

Contoh . Posisi Masker

Masker hati 100px dari kiri dan 200px dari atas:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") 100px 200px /150px no-repeat;
}

:

Contoh . Ukuran Masker cover

Nilai cover menskalakan masker agar sepenuhnya menutupi elemen, mempertahankan rasio aspek. Dapat memotong tepi masker jika rasio aspek tidak cocok:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/cover;
}

:

Contoh . Ukuran Masker contain

Nilai contain menskalakan masker agar sepenuhnya muat di dalam elemen, mempertahankan rasio aspek. Dapat menyisakan area kosong:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/contain no-repeat;
}

:

Contoh . Ukuran Masker

Ukuran tetap menetapkan dimensi masker yang tepat. Sebagai contoh, mari buat masker berukuran 50px:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") center/50px no-repeat;
}

:

Contoh . Pengulangan no-repeat

Nilai no-repeat menonaktifkan pengulangan masker. Masker ditampilkan hanya sekali di posisi yang ditentukan:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") top left / 150px no-repeat;
}

:

Contoh . Pengulangan repeat-x

Nilai repeat-x mengulang masker hanya pada sumbu horizontal:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: url("heart.svg") left center / 50px repeat-x;
}

:

Contoh . Komposisi add

Nilai add menambahkan beberapa masker (hasilnya - gabungan dari semua masker):

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 200px 30px / 150px no-repeat;
	mask-composite: add;
}

:

Contoh . Komposisi intersect

Nilai intersect hanya menunjukkan area persilangan masker:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: intersect;
}

:

Contoh . Komposisi exclude

Nilai exclude menunjukkan area masker yang tidak saling berpotongan:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 150px no-repeat,
		url("arrow.svg") 50px 30px / 150px no-repeat;
	mask-composite: exclude;
}

:

Contoh . Komposisi subtract

Nilai subtract mengurangkan masker kedua dari yang pertama. Sebagai contoh, mari buat satu hati dan kurangkan panah darinya:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask: 
		url("heart.svg") 100px 50px / 250px no-repeat,
		url("arrow.svg") 170px 80px / 120px no-repeat;
		
		
	mask-composite: subtract;
}

:

Contoh . Penulisan mask yang Diperluas

Properti mask, ditulis dengan komponen-komponen terpisah:

<img id="image" src="image.jpg">

#image {
	width: 500px;
	height: 281px;
	mask-image: url("heart.svg");
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	mask-origin: content-box;
	mask-clip: content-box;
	mask-mode: alpha;
	mask-composite: add;
}

:

Contoh . SVG untuk Gambar

Penggunaan elemen SVG sebagai masker untuk gambar:

<img id="image" src="image.jpg">
<svg width="0" height="0">
	<mask id="mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#image {
	width: 500px;
	height: 281px;
	background: red;
	mask: url(#mask);
}

:

Contoh . SVG untuk Gradien

Penggunaan elemen SVG sebagai masker untuk gradien:

<div id="elem"></div>
<svg width="0" height="0">
	<mask id="star-mask">
		<path d="M150 15L183 111L285 111L204 171L237 267L150 216L63 267L96 171L15 111L117 111Z" fill="white"/>
	</mask>
</svg>

#elem {
	width: 500px;
	height: 300px;
	background: linear-gradient(45deg, red, blue);
	mask: url(#star-mask);
}

:

Lihat Juga

properti mask-position,
menentukan posisi masker relatif terhadap elemen
properti mask-image,
menetapkan gambar untuk masker
properti mask-mode,
menentukan bagaimana masker berinteraksi dengan latar belakang
properti mask-size,
menentukan ukuran masker
properti mask-repeat,
menentukan pengulangan masker
properti mask-origin,
menentukan area penempatan masker
properti mask-clip,
menentukan area pemotongan masker
properti mask-composite,
menentukan bagaimana beberapa masker dikombinasikan

↑

Indonesia▼

Afrikaans Azərbaycan Български বাংলা Беларуская Čeština Dansk Deutsch Ελληνικά English Español Eesti Suomi Français हिन्दी Magyar Հայերեն Italiano 日本語 ქართული Қазақ 한국어 Кыргызча Lietuvių Latviešu Македонски Melayu မြန်မာ Nederlands Norsk Polski Português Română Русский සිංහල Slovenčina Slovenščina Shqip Српски Srpski Svenska Kiswahili Тоҷикӣ ไทย Türkmen Türkçe Ўзбек Oʻzbek Tiếng Việt

Kami menggunakan cookie untuk operasi situs, analitik, dan personalisasi. Pemrosesan data dilakukan sesuai dengan Kebijakan Privasi.

terima semua atur tolak