Rumah  >  Artikel  >  hujung hadapan web  >  kemahiran css: cara menambah topeng pada imej (kongsi)

kemahiran css: cara menambah topeng pada imej (kongsi)

奋力向前
奋力向前asal
2021-07-27 17:11:015228semak imbas

Artikel sebelumnya "Apakah sintaks CSS? Pengenalan terperinci kepada penggunaan dan peraturan " memberikan pemahaman tentang penggunaan dan peraturan sintaks CSS. Artikel berikut akan berkongsi dengan anda beberapa petua tentang menggunakan CSS untuk menambah kesan topeng pada imej Petua ini sangat praktikal dan boleh membantu anda memecahkan corak reka letak tapak web Ia hanya memerlukan beberapa baris kod.

kemahiran css: cara menambah topeng pada imej (kongsi)

Tambah Topeng

Topeng memberitahu penyemak imbas anda elemen aset yang sepatutnya kelihatan, yang bagus untuk membina bentuk dan reka letak yang kreatif. Masking boleh dilakukan dalam tiga cara menggunakan imej raster (seperti format PNG dengan bahagian lutsinar), kecerunan CSS atau elemen SVG.

Perhatikan bahawa tidak seperti imej raster biasa, SVG boleh diskalakan atau ditukar tanpa kehilangan kualiti yang ketara.

Kod yang dilampirkan:

img {
  mask-image: url(‘mask.png’) linear-gradient(-45deg,
                        rgba(0,0,0,1) 20%, rgba(0,0,0,0) 50%);
  mask-image: url(#masking); /*referencing to the element generated and defined in SVG code*/
}

Perlu dinyatakan bahawa Firefox hanya menyokong versi terkini, jadi kami perlu menggunakan elemen topeng SVG sebaris. Apakah yang berlaku jika kita menggunakan imej raster dengan tahap ketelusan? Bahagian lutsinar imej tidak akan dilihat - dengan kata lain, segmen legap akan ditunjukkan, menyembunyikan bahagian lain. Masking sangat berkuasa kerana ia membolehkan anda menggunakan sifat yang sama pada imej latar belakang, menentukan kedudukan, saiz dan pengulangannya.

Pra-pemprosesan:

kemahiran css: cara menambah topeng pada imej (kongsi)

Pasca pemprosesan:

kemahiran css: cara menambah topeng pada imej (kongsi)

Tahap ketelusan boleh digunakan untuk potong bahagian Imej animasi (cth. fail GIF), apabila menggunakan atribut ini, jangan lupa sokongan merentas penyemak imbas dan tambahkan awalan vendor.

Pembelajaran yang disyorkan: Tutorial video CSS

Atas ialah kandungan terperinci kemahiran css: cara menambah topeng pada imej (kongsi). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn