HTML / CSS / JavaScript
August 3, 2019

Opacity/Transparency

Opacity - o'zbek tiliga to'g'ridan-to'g'ri shaffof deb tarjima qilinadi.

CSS opacity xossasi elementning shaffofligini o'rnatish uchun ishlatiladi.


Shaffof rasm

opacity xossasi 0.0 - 1.0. gacha bo'lgan qiymatlarni qabul qiladi. Eng past qiymat, eng shaffof:

Yodda tuting: IE8 va avvalgi versiyalari uchun filter:alpha(opacity=x) ishlatiladi. x ni o'rniga 0 - 100 bo'lgan qiymat kiritiladi. Eng quyi qiymat eng shaffofi:


Shaffof Hover effekt

opacity ko'pincha :hover bilan birga ishlatiladi. :hover selektori sichqoncha elementni ustiga olib borilganda bo'ladigan effektni belgilaydi:

Tushuncha

1-CSS blok kod 1-namunamizda ko'rsatilganga o'xshaydi. Qo'shimcha qilib biz foydalanuvchi elementni ustiga sichqonchani olib borganda effekt sodir qilish uchun kod yozdik. Endigisi holatda sichqoncha rasmni ustiga olib borilsa rasm qayta shaffof ranga kirib qoladi:


Shaffof quti

Opacity xossasini elementning orqa foniga shaffoflik kiritish uchun ishlatganimizda, o'sha elementning barcha child klasslari xuddi o'sha shaffoflikni meros qilib oladi. Element ichidagi matnlar ham o'qib bo'lmas darajada shaffof bo'lib qoladi.


RGBA Shaffoflik

Agar barcha child sinflar o'ziga parent klassni qiymatini qabul qilib olishini xohlamasangiz, RGBA ranglardan foydalaning: