CSS elementining shaffofligini o'zgartirishning uchta usuli mavjud:
shaffoflik xususiyatidan foydalanib,
rgba () funktsiyasidan foydalanib,
hsla () funktsiyasidan foydalanish.
1. Shaffoflik xususiyati
Shaffoflik xususiyati veb -sahifaning istalgan elementini qisman yoki to'liq shaffof qilish imkonini beradi. Bu xususiyat fon rasmi (rasm) yoki rang yoki gradientli fonga ega bo'lgan elementlarning shaffofligini o'zgartiradi. Agar shaffoflik xususiyati qo'llaniladigan element tarkibida boshqa elementlar bo'lsa, ular ham shaffoflikni o'zgartiradilar.
Shaffoflik xususiyati 0 (to'liq shaffof) dan 1 (shaffof) gacha o'zgaradi, masalan:
H1 (rang: # CD6829;) div (fon: # CDD6DB; shaffoflik: .3;) 
Guruch. 1. Shaffoflik yordamida elementlarning shaffofligi
2. rgba () funktsiyasi
RGBA rang modeli kerakli nisbatlarni aralashtirib rang hosil qiladi qizil (qizil), yashil (yashil) va ko'k (ko'k) ranglar va alfa kanali (alfa) rangning shaffoflik darajasi uchun javobgardir. Shaffoflik xususiyatidan farqli o'laroq, boshqa elementlarni o'z ichiga olgan blok uchun rgba () funktsiyasi faqat blokning shaffofligini o'zgartiradi.
Guruch. 2. RGB rangli model h1 (rang: # CD6829;) div (fon: rgba (205, 214, 219, 0,3);) 
Guruch. 3. rgba () funksiyasi yordamida elementlarning shaffofligi 3. hsla () funktsiyasi
Hsla () funktsiyasi, uning parametrlari o'rtacha ohang (rang), to'yinganlik, yorqinlik va alfa kanali (alfa), shuningdek, yarim shaffof rangni o'rnatish imkonini beradi.
Rangli ranglar rang g'ildiragidan mos keladigan qiymat yordamida foiz sifatida belgilanadi. Doira o'zi sektorlarga bo'linadi, uning chegaralarida asosiy ranglar joylashgan:
0/360 ° - qizil
60 ° - sariq
120 ° - yashil
180 ° - ko'k
240 ° - ko'k
270 ° - binafsha rang
300 ° - qizil.
Qora rang olish uchun siz rang, to'yinganlik va yorqinlik qiymatlarini nolga o'rnatishingiz kerak - hsla (0, 0%, 0%, 1). Oq rang 100%nashrida hsla (0, 0%, 100%, 1), kulrang esa nol to'yinganlik hsla (0, 0%, 50%, 1) da olinadi.
Shaffoflik xususiyati CSS -da shaffoflik effektini yaratish uchun ishlatiladi.
IE8 va oldingi brauzerlar muqobil xususiyatni qo'llab -quvvatlaydi - filtr: alfa (shaffoflik = x), bu erda "x" qiymati 0 dan 100 gacha bo'lishi mumkin, qiymat qanchalik past bo'lsa, shaffof bo'ladi.
Boshqa barcha brauzerlar standart CSS shaffoflik xususiyatini qo'llab -quvvatlaydi, ular 0,0 dan 1,0 gacha bo'lgan qiymatlarni olishi mumkin, qiymat qanchalik past bo'lsa, shaffofroq bo'ladi:
Harakat qilib ko'ring "
Shaffoflikni olib boring
The: hover psevdo-klassi elementlar ustiga sichqonchani kelganda ularning ko'rinishini o'zgartirish imkonini beradi. Biz bu imkoniyatdan foydalanib, sichqonchani surish paytida tasvir shaffofligini yo'qotamiz.
Harakat qilib ko'ring "
Fon shaffofligi
Elementni shaffof qilishning ikkita usuli bor: yuqorida tavsiflangan shaffoflik xususiyati va RGBA formatidagi fon rangini ko'rsatish.
Siz allaqachon RGB ranglarini namoyish qilish modeli bilan tanish bo'lishingiz mumkin. RGB (Qizil, Yashil, Moviy - qizil, yashil, ko'k) - bu qizil, yashil va ko'k ranglarni aralashtirib rangni aniqlaydigan rang tizimi. Masalan, matn rangini sariq rangga o'rnatish uchun siz quyidagi deklaratsiyalardan birini ishlatishingiz mumkin:
Rang: rgb (255,255,0); rang: rgb (100%, 100%, 0);
RGB bilan ko'rsatilgan ranglar biz ishlatgan olti burchakli qiymatlardan farq qiladi, chunki ular alfa shaffoflik kanalidan foydalanishga imkon beradi. Bu shuni anglatadiki, alfa shaffofligi bo'lgan elementning fonida nima borligi ko'rsatiladi.
RGBA rang deklaratsiyasi sintaksisi bo'yicha standart RGB qoidalariga o'xshaydi. Biroq, boshqa narsalar qatorida, biz qiymatni RGBA (RGB o'rniga) deb e'lon qilishimiz va 0,0 (to'liq shaffof) dan 1 (to'liq shaffof) oralig'idagi rang qiymatidan keyin shaffoflik uchun qo'shimcha o'nlik qiymatini o'rnatishimiz kerak.
Rang: rgba (255,255,0,0,5); rang: rgba (100%, 100%, 0,0,5);
Shaffoflik xususiyati va RGBA o'rtasidagi farq shundaki, shaffoflik xususiyati butun elementga shaffoflikni qo'llaydi, ya'ni elementning butun tarkibi shaffof bo'ladi. Va RGBA sizga elementning alohida qismlarining shaffofligini o'rnatishga imkon beradi (masalan, faqat matn yoki fon):
Asosiy (fon tasviri: url (img.jpg);) .prim1 (kenglik: 400 piksel; chekka: 30 piksel 50 piksel; fon rangi: #ffffff; chegara: 1 piksel qattiq qora; shrift og'irligi: qalin; shaffoflik: 0,5; filtr) alfa (shaffoflik = 70); qora; shrift og'irligi: qalin; matnni tekislash: o'rtada;) Sinab ko'ring "
Eslatma: RGBA qiymatlari IE8 va undan oldingi versiyalarda qo'llab -quvvatlanmaydi. Alfa rang qiymatlarini qo'llab -quvvatlamaydigan eski brauzerlar uchun qaytariladigan rangni e'lon qilish uchun uni RGBA qiymatidan oldin belgilang: fon: rgb (255,255,0); fon: rgba (255,255,0,0,5);
Vlad Merjevich
Elementning shaffofligi effekti fon tasvirida aniq ko'rinadi va turli xil operatsion tizimlarda keng tarqalgan, chunki u zamonaviy va chiroyli ko'rinadi. Veb -dizaynda shaffoflik ham shaffoflik xususiyati yoki fon uchun o'rnatilgan RGBA rang formati orqali qo'llaniladi va erishiladi.
Gradient blok
Shaklda ko'rsatilgan blokni yasang. 1. Blok sarlavhasi ostida gradientli fon va yarim ko'rsatgichli yarim shaffof gradyanli ramkani o'z ichiga oladi. Sahifadagi fon faqat shaffoflik effektining ravshanligi uchun ko'rsatiladi, siz xohlagan rasmlaringizni belgilashingiz mumkin. Minimal blok balandligi - 100 piksel.
Qanday qilib qatlamni yarim shaffof qilishim mumkin?
Elementning shaffofligini o'zgartirish uchun 0 dan 1 gacha bo'lgan qiymatdagi shaffoflik xususiyatidan foydalaning, bu erda 0 to'liq shaffoflikka mos keladi va 1, aksincha, ob'ektning shaffofligiga mos keladi. Bu xususiyat Internet Explorer -da ishlamaydi, shuning uchun siz maxsus filtrni ishlatishingiz kerak, bu CSS spetsifikatsiyasiga kirmaydigan xususiyat. 1 -misol, barcha brauzerlar uchun qatlam shaffofligini qanday o'rnatishni ko'rsatadi.
Shaffof fon
Vlad Merjevich
Qisman oshkoralik, to'g'ri ishlatilganda, veb -sayt dizaynida juda ta'sirli ko'rinadi. Asosiysi shundaki, shaffof bloklar ostida bitta rangli naqsh emas, balki tasvir bor, bu holda shaffoflik sezilarli bo'ladi. Bu effektga har xil yo'llar bilan erishiladi va agar siz hamma narsani eslasangiz, eskirib qolgan usullar bo'lsa, u PNG tasvirini fon sifatida ishlatadi, katakli tasvir va shaffoflik xususiyatini yaratadi. Ammo blokda shaffof fon yaratish zarur bo'lganda, bu usullarning yoqimsiz salbiy tomoni bor. Men qisqacha sharh beraman, shunda nima xavf ostida ekanligi aniq bo'ladi, shuningdek, shaffoflik effektini yaratishning noan'anaviy variantlari bilan tanish bo'lmagan o'quvchilar uchun.
Jadvalni qanday qilib yarim shaffof qilib qo'yishim mumkin, lekin ba'zi hujayralar unday emas?
CSS3 -dagi elementning shaffofligini o'zgartirish uchun shaffoflik xususiyati taqdim etiladi, uning qiymati 0 dan 1 gacha o'zgarishi mumkin. Nol elementning to'liq shaffofligiga, bittasi, aksincha, shaffoflikka mos keladi. Zamonaviy brauzerlar bu xususiyat bilan juda to'g'ri ishlaydi, Internet Explorer bundan mustasno, shuning uchun siz alfa qiymatli (Opacity = X) maxsus filtr xususiyatidan foydalanishingiz kerak, bu erda X 0 dan 100 gacha o'zgarishi mumkin.
CSS shaffofligi html -dagi elementlarning (rasmlar, matn, bloklar) shaffofligi uchun javobgardir.
CSS shaffofligi sintaksisi
shaffoflik: qiymat;
Bu erda qiymat haqiqiy qiymatlarni 0,0 dan 1,0 gacha olishi mumkin. 1.0 qiymati shaffoflikni bildirmaydi (standart).
Misollar: html -da shaffoflik
1 -misol. Html -da shaffof rasm
Birinchi rasm shaffof bo'lmasdan, ikkinchisi 0,5 oshkoralik bilan ko'rsatiladi
2 -misol. Html -da shaffoflik effektlari
Odatiy bo'lib, blok qisman shaffof. Sichqoncha ustida turganingizda, blok yorqinroq bo'ladi. Bunday effektlar ko'pincha veb -sayt dizaynida ishlatiladi.
Sahifa quyidagilarga aylantiriladi
3 -misol. Html formatidagi rasmning shaffof bloki
Quyida tasvirni qisman berkituvchi yarim shaffof blokka misol keltirilgan. Blok bo'sh fonda qanday ko'rinishini ko'rsatish uchun ataylab tasvirni to'liq qoplamaydi.
Sahifa quyidagilarga aylantiriladi
CSS-da shaffoflik so'nggi paytlarda juda zamonaviy uslub bo'lib kelgan va brauzerlararo ishlashda qiyinchiliklarni keltirib chiqarmoqda. Hozircha barcha brauzerlarda oshkoralikni amalga oshirishning yagona o'lchovli usuli yo'q. Biroq, so'nggi paytlarda vaziyat sezilarli darajada yaxshilandi.
Maqolada mavjud yondashuvlar batafsil ko'rib chiqilgan va barcha brauzerlarda minimal harakat bilan bir xil natijaga erishishga yordam beradigan kod misollari va tushuntirishlari keltirilgan.
Shuni ta'kidlash kerakki, shaffoflik bir necha yillardan beri mavjud bo'lsa -da, u hech qachon CSS standartining bir qismi bo'lmagan. Bu nostandart xususiyat va CSS3 spetsifikatsiyasining bir qismi bo'lishi kerak.
Eski yondashuv
Firefox va Safari -ning eski versiyalarida siz quyidagi xususiyatni qo'llashingiz kerak:
#myElement (-khtml-shaffoflik: .5; -moz-shaffoflik: 0.5;)
-Khtml -opacity xususiyati webkit brauzerlarining eski versiyalarida ishlatilgan. Saytingiz trafigining katta qismi tashrif buyuruvchilar Safari 1.x -dan foydalanayotganiga ishonchingiz komil bo'lmasa, bu mulk eskirgan va endi kerak emas.
Keyingi qatorda -moz -opacity xususiyati ishlatiladi, u Mozilla dvigatelining juda erta versiyalarida ishlagan. Firefox 0.9 versiyasida uni qo'llab -quvvatlashni to'xtatdi.
Firefox, Safari, Chrome va Opera -da CSS shaffofligi
Ko'pgina zamonaviy brauzerlar uchun quyidagi xususiyat etarli:
#myElement (shaffoflik: .7;)
Yuqoridagi misolda element 70% shaffoflikka (30% shaffoflik) o'rnatiladi. Ya'ni, agar biz qiymatni bitta qilib qo'ysak, element shaffof bo'ladi va shunga mos ravishda bu qiymatni nolga qo'yish uni ko'rinmas holga keltiradi.
Shaffoflik xususiyati 2 ta o'nli raqamni boshqaradi. Ya'ni, ".01" qiymati ".02" qiymatidan farq qiladi, lekin unchalik sezilmaydi.
Internet Explorer uchun CSS shaffofligi
Odatdagidek, Internet Explorer boshqa brauzerlar bilan do'stona munosabatda emas. Bundan tashqari, hozirda bizda ushbu brauzerning uchta keng tarqalgan versiyasi mavjud, ularning har birida shaffoflik har xil va ba'zida ijobiy natijaga erishish uchun qo'shimcha harakatlar talab etiladi.
#myElement (filtr: alfa (shaffoflik = 40);)
Bu misolda 6-8-versiyalarda ishlaydigan filtr xususiyatidan foydalaniladi, lekin 6 va 7-versiyalar uchun bitta cheklov mavjud: elementda hasLayout xususiyati rost qilib o'rnatilgan bo'lishi kerak. Bu mulk faqat IEda mavjud va siz bu haqda ko'proq o'qishingiz mumkin, masalan, Xabreda.
IE8 -da CSS -dan foydalanib shaffoflikni o'rnatishning yana bir usuli - quyidagi yondashuvdan foydalanish (izohlarga e'tibor bering):
#myElement (filtr: progid: DXImageTransform.Microsoft.Alpha (shaffoflik = 40); / * IE6, IE7 va IE8 * / -ms -filterda ishlaydi: "progid: DXImageTransform.Microsoft.Alfa (shaffoflik = 40)"; / * Faqat IE8 * /)
Birinchi qator hozirda ishlatilayotgan barcha versiyalarda ishlaydi, ikkinchisi faqat IE8da. E'tibor bering, ikkinchi satrda -ms- prefiksi ishlatiladi va qiymat keltirilgan.
JavaScript yoki jQuery yordamida CSS shaffofligini sozlash va o'zgartirish
Shaffoflikni o'rnatish uchun siz quyidagi kodni ishlatishingiz mumkin:
Document.getElementById ("myElement"). Style.opacity = ".4"; // ko'pchilik brauzerlar uchun document.getElementById ("myElement"). style.filter = "alfa (shaffoflik = 40)"; // IE uchun
Albatta, bu holda jQuery -dan foydalanish ancha oson bo'ladi, bundan tashqari u barcha brauzerlarda ishlaydi:
$ ("# myElement"). css ((shaffoflik: .4)); // barcha brauzerlarda ishlaydi
Siz ushbu mulkni jonlantirishingiz mumkin:
$ ("# myElement"). animate ((shaffoflik: .4), 1000, function () (// Animatsiya tugadi; bu kod hamma brauzerlarda ishlaydi.));
RGBA funktsiyasi
CSS3 da rgba funktsiyasidan foydalangan holda alfa kanalini qo'llab -quvvatlash rejalashtirilgan. Bu xususiyat Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+ da ishlaydi. U shunday ishlatiladi:
#rgba (fon: rgba (98, 135, 167, .4);)
Bunday holda, oxirgi parametr shaffoflik darajasini ko'rsatadi.
HSLA funktsiyasi
Oldingi funktsiyaga o'xshab, CSS3 HSLA funktsiyasidan foydalanib, yarim shaffof rangni sozlash imkonini beradi, uning parametrlari Hue, Saturation, Lightness va Alpha channel.
#hsla (fon: hsla (207, 38%, 47%, .4);)
Rgba va hsla funktsiyalaridan foydalanganda muhim nuqta shaffoflik parametrining bola elementlariga qo'llanilmasligi, shaffoflik xususiyati meros bo'lib qolishi.