CSS shaffofligi-bu brauzerlararo yechim - 3.8 dan 5 gacha, 6 ta ovozga asoslangan

Bu darsda biz CSS shaffofligini ko'rib chiqamiz, sahifaning turli elementlarini qanday qilib shaffof qilishni va brauzerlararo to'liq muvofiqligini, ya'ni bu effektni turli brauzerlarda bir xil ishlashini o'rganamiz.

Har qanday elementning shaffofligini qanday sozlash mumkin

CSS3 -da shaffoflik xususiyati shaffof elementlarni yaratish uchun javobgardir, uni istalgan elementga qo'llash mumkin. Bu xususiyat shaffoflik darajasini belgilaydigan 0 dan 1 gacha qiymatlarga ega. Bu erda 0 - to'liq shaffoflik (barcha elementlar uchun standart) va 1 - to'liq shaffoflik. Qiymatlar kasrlarda yoziladi: 0,1, 0,2, 0,3 va boshqalar.

Foydalanish misoli:

Brauzerlararo shaffoflik

Hamma brauzerlar ham yuqoridagi shaffoflik xususiyatini bir xil tushunish va amalga oshira olmaydi. Ba'zi hollarda, siz boshqa mulk nomi yoki filtrlardan foydalanishingiz kerak.

CSS3 shaffofligi quyidagi turdagi brauzerlar tomonidan qo'llab -quvvatlanadi: Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.

Yaxshi Internet -brauzer kabi 9.0 versiyasiga qadar brauzer shaffoflik xususiyatini qo'llab -quvvatlamaydi va bu brauzer uchun shaffoflikni yaratish uchun siz filtr xususiyatini va alfa qiymatini (Opacity = X) ishlatishingiz kerak, bunda X butun son hisoblanadi. shaffoflik darajasi aniqlanadigan 0 dan 100 gacha. 0 to'liq shaffof va 100 to'liq shaffof emas.

Firefox brauzerining 3.5 versiyasidan oldingi versiyasi shaffoflik o'rniga -moz -opacity xususiyatini qo'llab -quvvatlaydi.

KHTML dvigatelida qurilgan Safari 1.1 va Konqueror 3.1 kabi brauzerlar shaffoflikni nazorat qilish uchun: -khtml -opacity xususiyatidan foydalanadilar.

CSS -da shaffoflikni qanday sozlash kerak, shunda u hamma brauzerlarda bir xil ko'rinadi? Elementlarning shaffofligi uchun o'zaro faoliyat brauzer echimini yaratish uchun ular faqat bitta shaffoflik xususiyatini emas, balki quyidagi xususiyatlar ro'yxatini ham ro'yxatdan o'tkazishi kerak:

filtr: alfa (Shaffoflik = 50); / * IE uchun shaffoflik * / -moz -shaffoflik: 0,5; / * Mozilla 3.5 va undan past versiyalarni qo'llab -quvvatlash * / -khtml -shaffoflik: 0,5; / * Konqueror 3.1 va Safari 1.1 -ni qo'llab -quvvatlash * / shaffoflik: 0,5; / * Boshqa barcha brauzerlarni qo'llab -quvvatlash * /

Turli elementlarning shaffofligi

Keling, sahifada tez -tez ishlatiladigan ba'zi elementlarga shaffoflikni o'rnatish misollarini ko'rib chiqaylik.

CSS tasvirining shaffofligi.

Keling, shaffof rasm yaratishning bir nechta variantlarini ko'rib chiqaylik. Quyidagi misolda, birinchi rasmda shaffoflik yo'q, ikkinchisida 50%, uchinchisida 30%.

Natija:

Rasm ustida harakatlanayotganda CSS -da shaffoflik.

Kursor uning ustida harakatlanayotganda, ko'pincha rasm yoki boshqa elementni shaffof qilish kerak bo'ladi. Buni CSS pseudo-class: hover yordamida amalga oshirish mumkin. Buning uchun bizning rasmimizga ikkita sinf ajratilishi kerak, bittasi oddiy - bu rasmning nofaol holati va ikkinchi sinf: psevdo -klass bilan, bu erda rasmning shaffofligini ko'rsatish kerak. kursorni harakatlantirish.

Natijani demoda ko'rishingiz mumkin.

CSS uchun fon shaffofligi.

Shuni esda tutish kerakki, oshkoralik barcha ichki elementlarga taalluqlidir va ular ichki elementdan ko'ra oshkoralikka ega bo'la olmaydi.

Misol tariqasida, biz rasm yordamida yaratilgan sahifa foniga ega variant va rang yordamida yaratilgan va shaffofligi 50%bo'lgan blokni beramiz.

Namuna kodi:

Mana, yuqoridagi kodning chiqishi:

Bu darsda biz shunday tahlil qilamiz CSS xususiyatlari - shaffoflik va RGBA... Mulk Shaffoflik faqat elementlarning shaffofligi va funksiyasi uchun javobgardir RGBA- rang va shaffoflik uchun, agar siz alfa kanalining shaffofligini belgilasangiz.

CSS shaffofligi

Uchun raqamli qiymat shaffoflik 0,0 dan 1,0 gacha bo'lgan diapazonda ko'rsatilgan, bu erda nol - to'liq shaffoflik, bittasi, aksincha, mutlaq shaffoflik. Masalan, 50% shaffoflikni ko'rish uchun siz qiymatni 0,5 ga o'rnatishingiz kerak. Shuni yodda tutish kerak shaffoflik ota -onaning barcha farzandlariga tegishli. Bu shuni anglatadiki, shaffof fonda joylashgan matn ham shaffof bo'ladi. Va bu allaqachon juda muhim kamchilik, matn unchalik yaxshi ko'rinmaydi.

Skrinshotda siz qora matn ko'k fon kabi shaffof bo'lib qolganini aniq ko'rishingiz mumkin.

Div (
fon: url (rasmlar / yourimage.jpg); / * Fon rasmi * /
kengligi: 750 piksel;
balandligi: 100 piksel;
chegara: avtomatik;
}
.ko'k (
fon: # 027av4; / * Yarim shaffof fon rangi * /
shaffoflik: 0,3; / * Fon shaffofligi qiymati * /
balandligi: 70 piksel;
}
h1 (
to'ldirish: 6 piksel;
shrift oilasi: Arial Black;
shrift og'irligi: qalinroq;
shrift o'lchami: 50 piksel;
}

RGBA formatida CSS shaffofligi

Rangni yozish uchun format RGBA, mulkka nisbatan ancha zamonaviy alternativ shaffoflik. R (qizil), G (yashil), B (ko'k)- degani: qizil, yashil, ko'k. Oxirgi xat A- shaffoflikni belgilaydigan alfa kanali degan ma'noni anglatadi. RGBA Farqli Shaffoflik bolalarga ta'sir qilmaydi.

Keling, bizning misolimizdan foydalanib qaraylik RGBA... Keling, bu satrlarni uslublar bilan almashtiraylik.

Ma'lumot: ## 027av4; / * Fon rangi */
shaffoflik: 0,3; / * fon shaffofligi qiymati * /

keyingi qatorga

Ma'lumot: rgba (2, 127, 212, 0,3);

Ko'rib turganingizdek, 0,3 shaffoflik qiymati ikkala usul uchun ham bir xil.

RGBA bilan misol natijasi:

Ikkinchi skrinshot birinchisiga qaraganda ancha yaxshi ko'rinadi.

Bloklar fonining shaffofligi bilan o'ynab, siz saytda qiziqarli effektlarga erishishingiz mumkin. Bu shaffof bloklar fotosurat kabi rang -barang dizayndan o'tishi juda muhim. Faqat bu holatda ta'sir sezilarli bo'ladi. Ushbu uslub uzoq vaqtdan beri dizaynda ishlatilgan, hatto u paydo bo'lishidan oldin ham CSS3, u faqat grafik dasturlarda amalga oshirildi.

Agar xaridor maketni brauzerning eski versiyalarida yaxshi ko'rinishini talab qilsa Internet Explorer keyin mulkni qo'shing filtr va kodning haqiqiyligiga ta'sir qilmasligi uchun izoh berishni unutmang.

Chiqish

Format RGBA barcha zamonaviy brauzerlar bundan mustasno Internet Explorer... Bu ham juda muhim RGBA moslashuvchan, u bolalarga ta'sir qilmasdan, faqat ma'lum bir element ustida ishlaydi. Bu maket dizayneri uchun qulayroq ekanligi aniq. Mening tanlovim aniq format foydasiga RGBA qabul qilmoq CSS -da shaffoflik.

Materialni yaxshiroq mustahkamlash va aniqroq bo'lish uchun men sizga o'tishni taklif qilaman.

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.

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

Bu erda qiymat haqiqiy qiymatlarni 0,0 dan 1,0 gacha olishi mumkin. 1.0 qiymati shaffoflikni bildirmaydi (standart).

1 -misol. Html -da shaffof rasm

Birinchi rasm shaffof bo'lmasdan, ikkinchisi 0,5 oshkoralik bilan ko'rsatiladi

Elementlarning shaffofligi

Hover paytida tasvirni yarim shaffof qilish!

DemoDownload manba

E'tibor uchun rahmat!

Keyingi maqola
O'tkaziladigan div blokini qanday yaratish mumkin?