Lingkaran Bayangan CSS

Dengan CSS penutup, Anda dapat membuat lapisan penutup dan menempatkannya di elemen, untuk menghaluskan bagian tertentu elemen sebagian atau sepenuhnya.

Atribut mask-image

CSS mask-image Atribut menentukan gambar penutup lapisan.

Gambar penutup lapisan dapat berupa gambar PNG, gambar SVG,Gangguan Warna CSS atau Elemen <mask> SVG.

Dukungan browser

Angka di tabel di bawah menunjukkan versi pertama browser yang mendukung atribut ini penuh.

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

Gunakan gambar sebagai lapisan penutup

Untuk menggunakan gambar PNG atau SVG sebagai lapisan penutup, gunakan url() Lampirkan gambar penutup lapisan.

Gambar penutup perlu memiliki area transparan atau semi-transparan. Hitam menunjukkan transparan penuh.

Ini adalah gambar penutup yang kita gunakan (gambar PNG):

Ini adalah gambar dari Kota Lima Laut Italia:

Sekarang, kita akan menerapkan gambar penutup (gambar PNG di atas) sebagai lapisan penutup gambar Kota Lima Laut Italia:

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 penutup akan diputar atau bagaimana cara diputar. Nilai no-repeat menunjukkan bahwa gambar penutup tidak akan diputar (gambar penutup hanya akan muncul sekali).

实例

Jika kita lewatkan mask-repeat Properti, gambar penutup akan diputar di seluruh gambar Wuyancun:

Contoh

Berikut adalah kode sumber:

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

Coba Sendiri

Menggunakan gelombang sebagai lapisan penutup (masker):

Penampang gelombang linear dan radial dalam CSS dapat digunakan sebagai gambar penutup (masker).

Contoh penampang gelombang linear

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

Contoh

Menggunakan penampang gelombang linear sebagai lapisan penutup (masker):

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

Coba Sendiri

Di sini, kami menggunakan penampang gelombang linear dan penutup teks sebagai lapisan penutup gambar:

Contoh

menggunakan penampang gelombang linear dan penutup teks sebagai lapisan penutup (masker):

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

Coba Sendiri

Contoh penampang gelombang radial

Di sini, kami menggunakan penampang gelombang radial (berbentuk lingkaran) sebagai lapisan penutup gambar:

Contoh

menggunakan penampang gelombang radial (berbentuk lingkaran) 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, kita menggunakan gradasi radial (berbentuk ellips) sebagai lapisan penutup gambar:

Contoh

Menggunakan gradasi radial lain sebagai lapisan penutup (ellips):

.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 penutup

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

Di sini, kita menggunakan elemen <mask> SVG untuk membuat lapisan penutup berbeda untuk gambar:

Contoh

Sebuah lapisan penutup SVG (berbentuk 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 penutup SVG (berbentuk 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 penutup SVG (berbentuk lingkaran):

<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