kemahiran css: cara menambah topeng pada imej (kongsi)

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.

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:

Pasca pemprosesan:

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!