Ushbu darsda biz quyidagi CSS xususiyatlarini ko'rib chiqamiz - shaffoflik va RGBA. Opacity xususiyati faqat elementlarning shaffofligi uchun javobgardir, agar siz alfa kanal shaffofligi qiymatini belgilasangiz, RGBA funksiyasi rang va shaffoflik uchun javobgardir.

CSS shaffofligi Shaffoflik

Shaffoflikning raqamli qiymati 0,0 dan 1,0 gacha bo'lgan oraliqda o'rnatiladi, bu erda nol to'liq shaffoflik va bittasi, aksincha, mutlaq shaffoflikdir. Misol uchun, 50% shaffoflikni ko'rish uchun siz qiymatni 0,5 ga o'rnatishingiz kerak. Shuni yodda tutish kerakki, shaffoflik hamma narsaga tegishli bolalar elementlari ota-ona. Bu shaffof fondagi matn ham shaffof bo'lishini anglatadi. Va bu juda muhim kamchilik; matn unchalik yaxshi ko'rinmaydi.

CSS Opacity orqali shaffoflik

Skrinshotda qora matn ko'k fon kabi shaffof bo'lib qolgani aniq ko'rsatilgan.

Div(
fon: url (rasmlar/yourimage.jpg); /* Fon rasmi */
kengligi: 750px;
balandligi: 100px;
chegara: avtomatik;
}
.ko‘k (
fon: #027av4; /* Rang shaffof fon */
shaffoflik: 0,3; /* Fon shaffofligi qiymati */
balandligi: 70px;
}
h1 (
to'ldirish: 6px;
font-family: Arial Black;
shrift vazni: qalinroq;
shrift o'lchami: 50px;
}

RGBA formatidagi CSS shaffofligi

RGBA rang formati shaffoflik xususiyatiga zamonaviyroq muqobildir. R (qizil), G (yashil), B (ko'k) - degan ma'noni anglatadi: qizil, yashil, ko'k. Oxirgi A harfi shaffoflikni o'rnatadigan alfa-kanalni bildiradi. RGBA, Opacitydan farqli o'laroq, bolalar elementlariga ta'sir qilmaydi.

Endi RGBA-dan foydalangan holda misolimizni ko'rib chiqaylik. Keling, ushbu chiziqlarni uslublarda almashtiramiz.

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

keyingi qatorga

Fon: rgba(2, 127, 212, 0,3);

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

RGBA misolining natijasi:

Ikkinchi skrinshot birinchisiga qaraganda ancha yaxshi ko'rinadi.

Bloklar fonining shaffofligi bilan o'ynab, veb-saytingizda qiziqarli effektlarga erishishingiz mumkin. Ushbu shaffof bloklar fotosurat kabi rangli dizaynning ustiga chiqishi muhimdir. Faqat bu holatda ta'sir sezilarli bo'ladi. Ushbu uslub dizaynda uzoq vaqt davomida ishlatilgan, hatto har qanday CSS3 paydo bo'lishidan oldin, u faqat grafik dasturlarda amalga oshirilgan.

Agar mijoz brauzerning eski versiyalarida tartib yaxshi ko'rinishini talab qilsa Internet Explorer, keyin filtr xususiyatini qo'shing va kodning amal qilishiga putur etkazmasligi uchun unga izoh berishni unutmang.

.ko‘k (
fon: rgba(0, 120, 201, 0,3);
filtr: alfa(Opaklik=30); /* IEda shaffoflik */
}

Xulosa

RGBA formati Internet Explorer-dan tashqari barcha zamonaviy brauzerlar tomonidan qo'llab-quvvatlanadi. RGBA moslashuvchan bo'lishi ham juda muhim, u o'z farzandlariga ta'sir qilmasdan faqat ma'lum bir elementga ta'sir qiladi. Bu maket dizayneri uchun qulayroq ekanligi aniq. Mening tanlovim, albatta, CSS-da shaffoflikka erishish uchun RGBA formati foydasiga.

Materialni yaxshiroq birlashtirish va aniqroq bo'lish uchun sizga o'tishni maslahat beraman.

orem Ipsum oddiygina matbaa va matn terish sanoatining soxta matnidir. Lorem Ipsum 1500-yillardan beri sanoatning standart qo'g'irchoq matni bo'lib kelgan, o'shandan beri noma'lum printer galleyni olib, kitob namunasini yaratish uchun shifrlagan. U nafaqat besh asr davomida, balki elektron terishga sakrashdan ham omon qoldi. U 1960-yillarda Lorem Ipsum parchalarini o'z ichiga olgan Letraset varaqlarining chiqarilishi va yaqinda Aldus PageMaker kabi ish stoli nashriyot dasturlari, shu jumladan Lorem Ipsum versiyalari bilan ommalashgan.
O'quvchi sahifaning tartibini ko'rib chiqayotganda uning o'qilishi mumkin bo'lgan mazmuni bilan chalg'itishi uzoq vaqtdan beri tasdiqlangan haqiqatdir. Lorem Ipsum-dan foydalanishning maqsadi shundaki, u "Tarkib bu erda, kontent bu erda" dan farqli o'laroq, harflarning ko'proq yoki kamroq normal taqsimlanishiga ega bo'lib, uni ingliz tilida o'qilishi mumkin bo'lgan holga keltiradi. Ko'pgina ish stoli nashriyot paketlari va veb-sahifa muharrirlari endi standart namuna matni sifatida Lorem Ipsum-dan foydalanadilar va "lorem ipsum" so'zini qidirish ko'plab veb-saytlarni hali boshlang'ich bosqichida ochib beradi. Turli versiyalar yillar davomida, ba'zan tasodifan, ba'zan ataylab (in'ektsion hazil va shunga o'xshash) rivojlangan.

Shunday qilib, bugun biz html sahifalarida shaffoflik haqida gaplashamiz. Ehtimol, siz shaffof qalqib chiquvchi bloklarga duch kelgansiz, xoh u foto galereyasi yoki ba'zi mashhur veb-saytlarga kirish shakllari bo'lsin. HTMLda shaffoflikning ko'p ishlatilishi mavjud. Xo'sh, u qanday yaratilgan va qayerda ishlatilishi mumkin?

Xo'sh, birinchi navbatda, bizning hujjatimiz faqat bitta monitor tekisligiga ega emasligini tushunaylik - bu odatda 3 o'lchovli, men buni "Z-indeks" maqolasida aytib o'tganman. Shunga ko'ra, hatto butunlay shaffof qatlam, agar u displey to'plamining yuqori qismida bo'lsa, boshqa elementlarga kirishni bloklaydi. Bu shaffof bloklarning asosiy qo'llanilishidan biridir. Odatda soya effekti ishlatilsa-da, butunlay shaffof qatlam xuddi shunday ishlaydi. Masalan, ko'plab mashhur foto galereyalar ishlaydi, soyali qatlam tashkil etilgan bo'lib, unda fotosuratlar va ular uchun boshqaruv elementlari ko'rsatiladi. Sahifaning qolgan qismi (yarim) shaffof qatlam bilan "qoplangan" va sahifadagi barcha boshqa elementlarga kirishni bloklaydi. Bular. Undagi biron bir havolani bosish orqali siz sahifani tark eta olmaysiz - barcha matn fon bilan qoplangan. Saytning asosiy qismiga qaytish uchun ular odatda galereyani, kirish formasini va hokazolarni yopish uchun boshqaruv elementlarini taqdim etadilar. Javascript yordamida shaffof bloklarni ko'rsatish/yashirishni boshqarish. Afsuski, bunga muqobil yo'q. Undan foydalanmasdan, foydalanuvchi shaffof blokni umuman ko'rmaydi yoki joriy sahifadan chiqmasdan uni yopa olmaydi. Shuni ta'kidlash kerakki, buning uchun ko'rinish yoki displey xususiyatlari ishlatiladi.

Xo'sh, shaffoflik html-da qanday tashkil etilgan? Elementning shaffofligini sozlash odatda CSS spetsifikatsiyasiga kiritilmagan, shuning uchun uni yaratish uchun bir vaqtning o'zida bir nechta ko'rsatmalardan foydalanishingiz kerak. Ba'zi brauzerlar (ya'ni) bir variant bilan, boshqalari boshqasi bilan ishlaydi. Ya'ni o'rnatilgan filtr funksiyasidan foydalanadi, boshqa brauzerlar 0 (to'liq shaffof ob'ekt) dan 1 (to'liq noaniq) oralig'ida o'rnatiladigan "shaffoflik" xususiyatidan foydalanadi. Masalan, shaffoflik 30% bo'lsa, siz "shaffoflik: 0,30; filtr: alfa (shaffoflik = 30); " deb yozishingiz kerak. Xususiyatlari, misoldan ko'rinib turibdiki, o'xshash - faqat birinchi holatda 0 dan 1 gacha bo'lgan raqam ishlatiladi, ikkinchisida foiz belgisi qo'llaniladi. Bunday blokga misol: