masking CSS

Dengan menggunakan mask CSS, anda dapat membuat lapisan penutup dan meletakkannya di atas elemen untuk menyembunyikan bagian tertentu elemen sebahagian atau sepenuhnya.

Atribut mask-image

CSS mask-image Atribut menentukan imej lapisan penutup.

Imej penutup lapisan boleh adalah imej PNG, imej SVG,Pergantian Warna CSS atau ELEMEN <mask> SVG.

Dukungan pelayar

Angka di dalam tabel di bawah menunjukkan versi pertama browser yang mendukung atribut sepenuhnya.

dengan -webkit- Angka di awal prefix menunjukkan versi pertama yang mendukung prefix.

Gunakan imej sebagai lapisan penutup

Untuk menggunakan imej PNG atau SVG sebagai lapisan penutup, gunakan url() Lengkapkan imej lapisan penutup.

Imej penutup perlu mempunyai kawasan transpa atau semi-transpa. Hitam menandakan transpa penuh.

Ini adalah imej penutup yang akan kami gunakan (imej PNG):

Ini adalah imej dari kota lima pantai Itali:

Sekarang, kami akan aplikasikan imej penutup (imej PNG di atas) sebagai lapisan penutup imej kota lima pantai Itali:

Contoh

Berikut adalah kode sumber:

.mask1 {
  -webkit-mask-image: url(w3.png);
  mask-image: url(w3logo.png);
  mask-repeat: no-repeat;
}

coba sendiri

contoh penjelasan

mask-image Properti menentukan gambar yang digunakan sebagai lapisan penutup elemen.

mask-repeat Properti menentukan apakah gambar masker akan diputar semula atau bagaimana ia akan diputar semula. Nilai no-repeat menunjukkan bahwa gambar masker tidak akan diputar semula (gambar masker hanya akan ditampilkan sekali).

contoh lain

jika kami lewat mask-repeat Properti, gambar masker akan diputar semula di seluruh gambar Wuyuancun:

Contoh

Berikut adalah kode sumber:

.mask1 {
  -webkit-mask-image: url(w3logo.png);
  mask-image: url(w3logo.png);
}

coba sendiri

gunakan penampang sebagai lapisan penutup

Penampang linear dan radial dalam CSS dapat digunakan sebagai gambar masker.

Contoh penampang linear

Di sini, kami gunakan penampang linear sebagai lapisan penutup gambar. Penampang linear ini dari atas (hitam) ke bawah (transparen):

Contoh

gunakan penampang linear sebagai lapisan penutup:

.mask1 {
  -webkit-mask-image: linear-gradient(hitam, transparen);
  mask-image: linear-gradient(hitam, transparen);
}

coba sendiri

Di sini, kami gunakan penampang linear dan masker teks sebagai lapisan penutup gambar:

Contoh

gunakan penampang linear dan masker teks sebagai lapisan penutup:

.mask1 {
  max-width: 600px;
  height: 350px;
  overflow-y: scroll;
  background: url(wuhan.jpg) no-repeat;
  -webkit-mask-image: linear-gradient(hitam, transparen);
  mask-image: linear-gradient (hitam, transparen);
}

coba sendiri

Contoh penampang pelungsur

Di sini, kami gunakan penampang pelungsur (bentuk bulat) sebagai lapisan penutup gambar:

Contoh

gunakan penampang pelungsur (bentuk bulat) sebagai lapisan penutup (masker):

.mask2 {
  -webkit-mask-image: radial-gradient(circle, hitam 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(circle, hitam 50%, rgba(0, 0, 0, 0.5) 50%);
}

coba sendiri

Di sini, kami menggunakan gradient radial (bentuk ellips) sebagai lapisan penahan gambar:

Contoh

Menggunakan gradient radial lain sebagai lapisan penahan (ellipse):

.mask3 {
  -webkit-mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
  mask-image: radial-gradient(ellipse, black 50%, rgba(0, 0, 0, 0.5) 50%);
}

coba sendiri

Menggunakan SVG sebagai lapisan penahan

Elemen <mask> SVG dapat digunakan di dalam grafik SVG untuk menciptakan efek penahan.

Di sini, kami menggunakan elemen <mask> SVG untuk membuat lapisan penahan berbeda untuk gambar:

Contoh

Sebuah lapisan penahan SVG (bentuk segitiga):

<svg width="600" height="400">
  <mask id="svgmask1">
    <polygon fill="#ffffff" points="200 0, 400 400, 0 400"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask1)"></image>
</svg>

coba sendiri

Contoh

Sebuah lapisan penahan SVG (bentuk bintang):

<svg width="600" height="400">
  <mask id="svgmask2">
    <polygon fill="#ffffff" points="100,10 40,198 190,78 10,78 160,198"></polygon>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask2)"></image>
</svg>

coba sendiri

Contoh

Sebuah lapisan penahan SVG (bentuk bulat):

<svg width="600" height="400">
  <mask id="svgmask3">
    <circle fill="#ffffff" cx="75" cy="75" r="75"></circle>
    <circle fill="#ffffff" cx="80" cy="260" r="75"></circle>
    <circle fill="#ffffff" cx="270" cy="160" r="75"></circle>
  </mask>
  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="wuhan.jpg" mask="url(#svgmask3)"></image>
</svg>

coba sendiri