Apakah penapis yang disokong oleh css3?

Penapis yang disokong oleh css3 adalah kesan visual yang ditakrifkan oleh atribut penapis, termasuk: 1. Penapis kabur, yang boleh menetapkan kabur Gaussian pada imej 2. Penapis kontras; penapis; 5. Penapis skala kelabu;

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi CSS3&&HTML5, komputer Dell G3.

Penapis yang disokong oleh css3 ialah kesan visual yang ditakrifkan oleh atribut penapis.

Fungsi (kesan visual) yang boleh ditetapkan oleh atribut penapis

1. Penapis kabur (px)

Tetapkan kabur Gaussian pada imej . Semakin besar nilai, semakin kabur Nilai lalainya ialah 0, yang bermaksud tiada kabur.

filter:blur(4px);

2. Penapis kecerahan (%)

Gunakan pendaraban linear pada imej untuk menjadikannya kelihatan lebih cerah atau lebih gelap. Jika nilainya ialah 0%, imej akan menjadi hitam sepenuhnya. Jika nilainya 100%, tidak akan ada perubahan pada imej. Nilai lain sepadan dengan kesan pengganda linear. Nilai di atas 100% adalah baik dan imej akan menjadi lebih cerah daripada sebelumnya. Jika tiada nilai ditetapkan, lalai ialah 1.

 filter: brightness(200%);

3. Penapis kontras (%)

Laraskan kontras imej. Jika nilainya ialah 0%, imej akan menjadi hitam sepenuhnya. Nilai adalah 100% dan imej tidak berubah. Nilai boleh melebihi 100%, bermakna perbandingan yang lebih rendah akan digunakan. Jika tiada nilai ditetapkan, lalai ialah 1.

 filter: contrast(200%);

4. Penapis unjuran (x mengimbangi y mengimbangi julat warna kabur)

sangat serupa dengan sifat bayang-kotak perbezaannya ialah melalui penapis, sesetengah menyemak imbas Pelayan menyediakan pecutan perkakasan untuk prestasi yang lebih baik.

 filter: drop-shadow(8px 8px 10px red);

5. Penapis skala kelabu (%)

Tukar imej kepada skala kelabu. Nilai mentakrifkan skala penukaran. Jika nilainya ialah 100%, imej ditukar sepenuhnya kepada skala kelabu dan jika nilainya ialah 0%, imej itu akan kekal tidak berubah. Jika tidak ditetapkan, nilai lalai kepada 0. Anda juga boleh menulis perpuluhan antara 0-1.

 filter:grayscale(0.5);

6. Penapis putaran rona (deg)

Gunakan putaran rona pada imej. Biarkan warna dalam imej berputar mengikut kesesuaian dalam bulatan rona. Jika nilainya ialah 0deg, tidak akan ada perubahan pada imej. Jika nilai tidak ditetapkan, nilai lalai ialah 0deg. Walaupun nilai ini tidak mempunyai nilai maksimum, nilai yang melebihi 360deg adalah bersamaan dengan berputar semula.

 filter: hue-rotate(90deg);

7 Terbalikkan penapis imej (%)

Terbalikkan imej input. Nilai mentakrifkan skala penukaran. 100% daripada nilai adalah pembalikan lengkap. Nilai 0% bermakna tiada perubahan pada imej. Nilai antara 0% dan 100% adalah pengganda linear kesan. Jika nilai tidak ditetapkan, nilai lalai kepada 0.

 filter: invert(100%);

8. Penapis ketelusan (%)

Tahap ketelusan imej. Nilai 0% adalah telus sepenuhnya, dan nilai 100% meninggalkan imej tidak berubah. Antara 0-100% ia separa telus. Anda juga boleh menggunakan perpuluhan antara 0 dan 1 dan bukannya %.
Ia sangat serupa dengan atribut kelegapan sedia ada Perbezaannya ialah melalui penapis, sesetengah penyemak imbas akan memberikan pecutan perkakasan untuk meningkatkan prestasi.

 filter: opacity(30%);

9. Penapis Ketepuan (%)

Nilai 0% bermakna ia telah dinyahtepu sepenuhnya, dan nilai 100% bermakna tiada perubahan pada imej . Jika lebih daripada 100%, ketepuan akan meningkat dan warna akan menjadi lebih berat.

 filter: saturate(800%);

10 Penapis Sepia (%)

Tukar imej kepada sepia. Nilai 100% ialah sepia sepenuhnya, dan nilai 0% meninggalkan imej tidak berubah. Nilai antara 0% dan 100% adalah pengganda linear kesan. Jika tidak ditetapkan, nilai lalai kepada 0.

 filter: sepia(100%);

Gunakan kod:

&:hover {
          -webkit-filter: opacity(0.5%);
          -o-filter: opacity(0.5);
          -moz-filter: opacity(0.5);
          -ms-filter: opacity(0.5);
          filter: opacity(0.5);
        }

(Mempelajari perkongsian video: tutorial video css, bahagian hadapan web )

Atas ialah kandungan terperinci Apakah penapis yang disokong oleh css3?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!