filter
Misol
Rasm rangini oq-qoraga o‘zgartiring (100% grayscale):
document.getElementById("myImg").style.filter = "grayscale(100%)";
O‘zingiz sinab ko‘ring »
Tavsif
filter xususiyati rasmlarga vizual effektlar (masalan, xiralashtirish va to‘yinganlik) qo‘shadi.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar xususiyatni to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Xususiyat | |||||
|---|---|---|---|---|---|
| filter | 53.0 | 13.0 | 35.0 | 9.1 | 40.0 |
Sintaksis
filter xususiyatini qaytarish:
object.style.filter
filter xususiyatini o‘rnatish:
object.style.filter = "none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()"
Filtr funksiyalari
Eslatma: Foiz qiymatlaridan (masalan, 75%) foydalanadigan filtrlar qiymatni o‘nli kasr ko‘rinishida (masalan, 0.75) ham qabul qiladi.
| Filtr | Tavsif |
|---|---|
| none | Hech qanday effekt belgilanmaydi |
| blur(px) | Rasmga xiralashtirish effektini qo‘llaydi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi. Agar qiymat ko‘rsatilmasa, 0 ishlatiladi. |
| brightness(%) | Rasm yorqinligini sozlaydi. 0% rasmni butunlay qora qiladi. 100% (1) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar yorqinroq natija beradi. |
| contrast(%) | Rasm kontrastini sozlaydi. 0% rasmni butunlay qora qiladi. 100% (1) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar kontrasti kamroq natija beradi. |
| drop-shadow(h-shadow v-shadow blur spread color) | Rasmga soya (drop shadow) effektini qo‘llaydi. Mumkin bo‘lgan qiymatlar: h-shadow - Majburiy. Gorizontal soya uchun piksel qiymatini belgilaydi. Manfiy qiymatlar soyani rasmning chap tomoniga joylashtiradi. v-shadow - Majburiy. Vertikal soya uchun piksel qiymatini belgilaydi. Manfiy qiymatlar soyani rasm ustiga joylashtiradi. blur - Ixtiyoriy. Bu uchinchi qiymat bo‘lib, pikselda bo‘lishi shart. Soyaga xiralashtirish effektini qo‘shadi. Qiymat qanchalik katta bo‘lsa, xiralik shunchalik kuchli bo‘ladi (soya kattaroq va ochroq bo‘ladi). Manfiy qiymatlarga ruxsat berilmaydi. Agar qiymat ko‘rsatilmasa, 0 ishlatiladi (soyaning cheti keskin bo‘ladi). spread - Ixtiyoriy. Bu to‘rtinchi qiymat bo‘lib, pikselda bo‘lishi shart. Musbat qiymatlar soyani kengaytirib kattalashtiradi, manfiy qiymatlar esa soyani kichraytiradi. Agar ko‘rsatilmasa, 0 bo‘ladi (soya element bilan bir xil o‘lchamda bo‘ladi). Eslatma: Chrome, Safari va Opera, balki boshqa brauzerlar ham bu 4-uzunlikni qo‘llab-quvvatlamaydi; u qo‘shilsa, render qilinmaydi. color: Ixtiyoriy. Soyaga rang qo‘shadi. Agar ko‘rsatilmasa, rang brauzerga bog‘liq bo‘ladi (ko‘pincha qora). Maslahat: Bu filtr box-shadow xususiyatiga o‘xshaydi. |
| grayscale(%) | Rasmni kulrang tuslarga (grayscale) aylantiradi. 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay kulrang qiladi (oq-qora rasmlar uchun ishlatiladi). Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
| hue-rotate(deg) | Rasmga rang tusini aylantirish (hue rotation) effektini qo‘llaydi. Qiymat rasm namunalari rang doirasi bo‘ylab necha gradusga siljitilishini belgilaydi. 0deg standart qiymat bo‘lib, asl rasmni ifodalaydi. Eslatma: Maksimal qiymat — 360deg. |
| invert(%) | Rasmdagi namunalarni invertlaydi (ranglarini teskarisiga aylantiradi). 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay invertlaydi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
| opacity(%) | Rasm uchun noshaffoflik darajasini (opacity) o‘rnatadi. Noshaffoflik darajasi shaffoflik darajasini ifodalaydi, bunda: 0% — butunlay shaffof. 100% (1) standart qiymat bo‘lib, asl rasmni ifodalaydi (shaffoflik yo‘q). Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. Maslahat: Bu filtr opacity xususiyatiga o‘xshaydi. |
| saturate(%) | Rasm ranglarining to‘yinganligini o‘zgartiradi. 0% (0) rasmni butunlay to‘yinmagan (rangsiz) qiladi. 100% standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% dan yuqori qiymatlar o‘ta to‘yingan natija beradi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
| sepia(%) | Rasmni sepiya tusiga aylantiradi. 0% (0) standart qiymat bo‘lib, asl rasmni ifodalaydi. 100% rasmni butunlay sepiya tusiga keltiradi. Eslatma: Manfiy qiymatlarga ruxsat berilmaydi. |
Texnik tafsilotlar
| CSS versiyasi | CSS3 |
|---|
Tegishli sahifalar
CSS ma’lumotnomasi: filter xususiyati
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!