Penjelasan terperinci tentang sifat kabur CSS: penapis dan penapis latar belakang

Penjelasan terperinci tentang atribut kabur CSS: penapis dan penapis latar belakang

Pengenalan:
Apabila mereka bentuk halaman web, kami sering memerlukan beberapa kesan khas untuk meningkatkan daya tarikan visual halaman. Kesan kabur adalah salah satu daripada kesan khas yang biasa. CSS menyediakan dua atribut kabur: penapis dan penapis latar, yang digunakan untuk mengaburkan kandungan elemen dan kandungan latar belakang masing-masing. Artikel ini menerangkan kedua-dua sifat ini secara terperinci dan menyediakan beberapa contoh kod konkrit.

1. Atribut penapis

Atribut penapis digunakan untuk mengaburkan kandungan unsur. Ia boleh mencapai pelbagai kesan berbeza, termasuk kabur Gaussian, pelarasan kecerahan, pelarasan kontras dan banyak lagi. Berikut ialah beberapa nilai atribut penapis yang biasa digunakan dan kesannya.

1. Gaussian blur (kabur): Atribut ini boleh digunakan untuk menambah kesan kabur pada elemen. Lebih besar nilai, lebih besar kabur.

.blur {
  filter: blur(5px);
}

2. Pelarasan kecerahan (kecerahan): Anda boleh melaraskan kecerahan elemen melalui atribut ini. Nilai kurang daripada 1 menggelapkan, nilai lebih besar daripada 1 mencerahkan.

.brightness {
  filter: brightness(0.5);
}

3. Pelarasan kontras (kontras): Anda boleh melaraskan kontras elemen melalui atribut ini. Nilai kurang daripada 1 mengurangkan kontras, nilai lebih daripada 1 meningkatkan kontras.

.contrast {
  filter: contrast(2);
}

4. Terbalikkan kesan warna (terbalikkan): Atribut ini boleh digunakan untuk menambah kesan warna songsang pada elemen.

.invert {
  filter: invert(100%);
}

5. Putaran rona (hue-rotate): Atribut ini boleh memutarkan rona unsur.

.hue-rotate {
  filter: hue-rotate(90deg);
}

2. Atribut penapis latar belakang

Atribut penapis latar belakang digunakan untuk mengaburkan kandungan latar belakang elemen. Penggunaannya adalah serupa dengan atribut penapis, tetapi ia berfungsi pada latar belakang elemen dan bukannya kandungan elemen itu sendiri. Di bawah ialah beberapa nilai sifat penapis latar belakang yang biasa digunakan dan kesannya.

1. Gaussian blur (kabur): Atribut ini boleh digunakan untuk menambah kesan kabur pada latar belakang elemen. Lebih besar nilai, lebih besar kabur.

.backdrop-blur {
  backdrop-filter: blur(5px);
}

2. Pelarasan kecerahan (kecerahan): Anda boleh melaraskan kecerahan latar belakang elemen melalui atribut ini. Nilai kurang daripada 1 menggelapkan, nilai lebih besar daripada 1 mencerahkan.

.backdrop-brightness {
  backdrop-filter: brightness(0.5);
}

3. Pelarasan kontras (kontras): Atribut ini boleh digunakan untuk melaraskan kontras latar belakang elemen. Nilai kurang daripada 1 mengurangkan kontras, nilai lebih daripada 1 meningkatkan kontras.

.backdrop-contrast {
  backdrop-filter: contrast(2);
}

4. Terbalikkan kesan warna (terbalikkan): Atribut ini boleh digunakan untuk menambah kesan warna songsang pada latar belakang elemen.

.backdrop-invert {
  backdrop-filter: invert(100%);
}

5. Putaran warna (hue-rotate): Atribut ini boleh memutarkan warna latar belakang elemen.

.backdrop-hue-rotate {
  backdrop-filter: hue-rotate(90deg);
}

Kesimpulan:
Sifat penapis dan penapis latar belakang CSS memberikan kami pelbagai pilihan kesan kabur, menjadikan reka bentuk halaman web lebih berwarna. Dengan menggunakan atribut ini secara rasional, halaman tersebut boleh memberikan kesan yang lebih sejuk. Walau bagaimanapun, perlu diingatkan bahawa penyemak imbas yang berbeza mungkin mempunyai isu keserasian apabila menggunakan atribut ini, jadi ujian keserasian diperlukan dalam penggunaan sebenar untuk memastikan konsistensi kesan.

Pautan rujukan:

• [MDN Web Docs: filter](https://developer.mozilla.org/zh-CN/docs/Web/CSS/filter)
• [MDN Web Docs: backdrop-filter]( https://developer.mozilla.org/zh-CN/docs/Web/CSS/backdrop-filter)

Atas ialah kandungan terperinci Penjelasan terperinci tentang sifat kabur CSS: penapis dan penapis latar belakang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!