backdrop-filter
Misol
Element orqasidagi sohaga grafik effekt qo‘shing:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
}
O‘zingiz sinab ko‘ring »
Ta’rif va qo‘llanilishi
backdrop-filter xususiyati element orqasidagi sohaga grafik effekt qo‘llash uchun ishlatiladi.
Maslahat: Effektni ko‘rish uchun element yoki uning foni hech bo‘lmaganda qisman shaffof bo‘lishi kerak.
| Standart qiymat: | none |
|---|---|
| Meros qilinadi: | yo‘q |
| Animatsiya qilinadi: | yo‘q. animatable haqida o‘qing |
| Versiya: | CSS3 |
| JavaScript sintaksisi: | object.style.backdropFilter="grayscale(100%)" |
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
-webkit- bilan keladigan sonlar prefiks bilan ishlagan birinchi versiyani bildiradi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| backdrop-filter | 76 | 79 | 103 | 9 -webkit- | 63 |
CSS sintaksisi
backdrop-filter: none|filter|initial|inherit;
Xususiyat qiymatlari
| Qiymat | Tavsif | Demo |
|---|---|---|
| none | Standart qiymat. Orqa fonga (backdrop) hech qanday filtr qo‘llanmaydi | Demo ❯ |
| filter | Bo‘sh joy bilan ajratilgan filtr funksiyalari ro‘yxati, masalan:
yoki orqa fonga qo‘llanadigan SVG filtrning URL manzili |
Demo ❯ |
| initial | Bu xususiyatni standart qiymatiga o‘rnatadi. initial haqida o‘qing | |
| inherit | Bu xususiyatni ota elementidan meros qilib oladi. inherit haqida o‘qing |
Tegishli sahifalar
CSS ma’lumotnomasi: filter xususiyati
CSS darsligi: CSS rasmlar
HTML DOM ma’lumotnomasi: filter xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!