saturate()
Ta’rif va qo‘llanilishi
CSS saturate() filtr funksiyasi elementning to‘yinganligini (rang intensivligini) sozlaydi.
- 0% (0) elementni butunlay rangsiz (to‘yinmagan) qiladi
- 100% (1) hech qanday ta’sir ko‘rsatmaydi
- 200% (2) elementni o‘ta to‘yingan qiladi
Misol
Rasm uchun turli to‘yinganlik darajalarini belgilang:
#img1 {
filter: saturate(0);
}
#img2 {
filter: saturate(100%);
}
#img3 {
filter: saturate(200%);
}
O‘zingiz sinab ko‘ring »
Quyida ko‘proq "O‘zingiz sinab ko‘ring" misollari keltirilgan.
Brauzerlarda qo‘llab-quvvatlash
Jadvaldagi sonlar funksiyani to‘liq qo‘llab-quvvatlaydigan birinchi brauzer versiyasini ko‘rsatadi.
| Funksiya | |||||
|---|---|---|---|---|---|
| saturate() | 18 | 12 | 35 | 6 | 15 |
CSS sintaksisi
saturate(amount)
| Qiymat | Tavsif |
|---|---|
| amount | Ixtiyoriy. To‘yinganlikni son yoki foiz sifatida belgilaydi. 0% (0) elementni butunlay rangsiz (to‘yinmagan) qiladi. 100% (1) hech qanday effekt bermaydi. 100% dan yuqori qiymatlar o‘ta to‘yingan natija beradi |
| Versiya: | CSS Filter Effects moduli, 1-daraja |
|---|
Ko‘proq misollar
Misol
saturate() funksiyasidan backdrop-filter xususiyati bilan foydalaning:
div.transbox {
background-color: rgba(255, 255, 255, 0.4);
-webkit-backdrop-filter: saturate(450%);
backdrop-filter: saturate(450%);
padding: 20px;
margin: 30px;
font-weight: bold;
}
O‘zingiz sinab ko‘ring »
Tegishli sahifalar
CSS ma’lumotnomasi: CSS filter xususiyati.
CSS ma’lumotnomasi: CSS blur() funksiyasi.
CSS ma’lumotnomasi: CSS brightness() funksiyasi.
CSS ma’lumotnomasi: CSS contrast() funksiyasi.
CSS ma’lumotnomasi: CSS drop-shadow() funksiyasi.
CSS ma’lumotnomasi: CSS grayscale() funksiyasi.
CSS ma’lumotnomasi: CSS hue-rotate() funksiyasi.
CSS ma’lumotnomasi: CSS invert() funksiyasi.
CSS ma’lumotnomasi: CSS opacity() funksiyasi.
CSS ma’lumotnomasi: CSS sepia() funksiyasi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!