CSS-da fon tasvirining shaffofligini qanday o'rnatish mumkin? Shaffof fon Shaklda fonni qanday shaffof qilish mumkin
Ko'pincha siz Internetda mos rasmni topishingiz mumkin, masalan, uni veb-saytga kiritish uchun. Yoki siz kollaj yaratyapsiz va bitta rasmga boshqalarni qo'shishingiz kerak. Ammo sizga kerak bo'lgan tasvirlar odatda qandaydir fonga ega.
Keling, buni qanday qilishimiz mumkinligini aniqlaylik muharrir yordamida rasm uchun shaffof fon yaratingAdobeFotoshop. Menda Adobe Photoshop CS5 ning inglizcha versiyasi o'rnatilgan, shuning uchun uni sizga ko'rsataman.
Men turli xil tezkor tugmalar birikmalarini taqdim etishga harakat qilaman.
Agar sizda hali Photoshop o'rnatilmagan bo'lsa, uni kamdan-kam ishlatasiz yoki u ingliz tilida bo'lsa, Paint.net-da shaffof fon yaratishingiz mumkin. Bu qattiq diskda ko'p joy egallamaydigan oddiy rus tilidagi tasvir muharriri. Havolani bosish orqali siz batafsil maqolani o'qishingiz mumkin. Paint.net dasturini bizning veb-saytimizdan yuklab olishingiz mumkin.
Birinchidan, oddiy misolni ko'rib chiqaylik. Aytaylik, sizda oddiy fonda tasvir bor, u logotip yoki biror narsaning nomi bo'lishi mumkin. Keling, fotoshopda shaffof fonda ushbu logotip yoki yozuvni yarataylik.
Muharrirda kerakli rasmni oching. Endi qatlam uchun shaffof fon yaratamiz. "Qatlamlar" oynasida qo'shilgan qatlamni ikki marta bosing - uning qarshisida qulf bo'ladi. "Yangi qatlam" oynasi ochiladi, undagi "OK" tugmasini bosing. Shundan so'ng, qulf yo'qoladi.
"Sehrli tayoqcha" vositasini tanlang. Xususiyatlar satrida sezgirlik darajasini belgilang, uning qanday ishlashini tushunish uchun turli qiymatlarni o'rnating, masalan, 20 va 100. Rasmni bekor qilish uchun “Ctrl+D” tugmasini bosing.
Sezuvchanlikni o'rnating va sehrli tayoqcha bilan fon maydonini bosing. Tanlangan fonga tanlanmagan qismlarni qo'shish uchun "Shift" tugmasini bosib turing va tanlashda davom eting. Tanlangan hududlarni o'chirish uchun "O'chirish" tugmasini bosing.
Endi fon o'rniga shaxmat taxtasi bor - bu biz oq fonni shaffof qilishga muvaffaq bo'lganimizni anglatadi. Tanlovni olib tashlang - "Ctrl + D".
Agar sizda juda ko'p turli xil ranglar va ob'ektlarga ega bo'lgan rasm yoki fotosuratingiz bo'lsa, keling, Photoshop-da tasvir uchun shaffof fonni qanday qilishni ko'rib chiqaylik.
Bunday holda, biz Tez tanlash vositasidan foydalanamiz. Sichqonchaning chap tugmasi bilan sehrli tayoqchani biroz kechikish bilan bosing va menyudan kerakli vositani tanlang.
Endi biz shaffof fonda qoldirmoqchi bo'lgan ob'ektni tanlashimiz kerak. Xususiyatlar panelida turli o'lchamlarni o'rnating va ob'ektni bosing, unga joylar qo'shing. Agar keraksiz fon noto'g'ri tanlangan bo'lsa, "Alt" tugmasini bosing va uni olib tashlang.
Natijani ko'rish uchun "Q" tugmasini bosing. Tasvirning shaffof bo'ladigan qismlari pushti rangda ta'kidlanadi.
“Ctrl+C” tugmalarini bosib tanlangan maydonlardan nusxa oling. Keyin shaffof fon bilan yangi "Ctrl + N" faylini yarating.
Nusxalangan qismlarni unga joylashtiring, "Ctrl + V". Agar ularda fonning keraksiz qismlari qolsa, ularni Eraser vositasi yordamida olib tashlang. Shaffof fonda olingan rasmlarni PNG yoki GIF formatida saqlaymiz.
Rasmning oq fonini shaffof qiling yoki Photoshop-da rangli tasvir yoki fotosuratning alohida qismlari uchun shaffof fon yarating. Shundan so'ng, siz ularni kerak bo'lganda ishlatishingiz mumkin: ularni veb-saytga joylashtiring, boshqa rasmga qo'shing yoki qiziqarli kollajlar yarating.
CSS fon shaffofligi
Saytdagi fonning shaffofligi CSS xususiyatlari orqali yaratiladi. Shaffoflikka ikki yo'l bilan erishish mumkin: shaffoflik xususiyati va background:rgba() orqali. Keling, ularning har birini ko'rib chiqamiz va keyin taqqoslaymiz.
1. Fon shaffofligi uchun CSS shaffoflik xususiyati
CSS shaffoflik xususiyatiga ega, undan tasvirlar, matnlar, shu jumladan fonning shaffofligini o'rnatish uchun foydalanish mumkin.
Shaffoflik oddiygina 0,0 dan 1,0 gacha bo'lgan haqiqiy sonni ko'rsatish orqali aniqlanadi. Raqam qanchalik past bo'lsa, ob'ekt kamroq seziladi.
shaffoflik: 0,5; // Shaffoflik shaffofligi: 0,2; // Ob'ekt faqat 20% shaffoflikda ko'rinadi: 0,8; // Ob'ekt faqat 80% ko'rinadi
Keling, shaffoflik xususiyatiga ega bo'lgan misolni ko'rib chiqaylik.
Matn ham shaffof
2. CSS background:rgba() xususiyati orqali shaffoflik
Veb-saytda fon shaffofligini o'rnatishning ikkinchi varianti - CSS xususiyati fon: rgba. Keling, bir misolni ko'rib chiqaylik
Matn ham shaffof
Ushbu kod sahifada quyidagilarga tarjima qilinadi:
Ikki usul o'rtasidagi farq shundaki, shaffoflikdan foydalanganda blok ichidagi matn shaffof bo'ladi.
Ikkinchi holda, bunday muammo yo'q. Shuning uchun, siz vaziyatga qarashingiz kerak - aniq nimani kutmoqdasiz.
Elementning shaffof effekti fon tasvirida aniq ko'rinadi va turli xil operatsion tizimlarda keng tarqaldi, chunki u zamonaviy va chiroyli ko'rinadi. Veb-dizaynda shaffoflik ham qo'llaniladi va shaffoflik xususiyati yoki fon uchun o'rnatilgan RGBA rang formati orqali erishiladi.
Shaffoflik xususiyati
Bu xususiyatning asosiy xususiyati shundaki, shaffoflik qiymati faqat fonga emas, balki undagi barcha yordamchi elementlarga ta'sir qiladi. Bu shuni anglatadiki, fon ham, matn ham shaffof bo'ladi va siz qo'shish orqali shaffoflik darajasini oshira olmaysiz. Jadvalda 1-rasmda turli xil shaffoflik qiymatlari bilan matn va fonning ko'rinishi ko'rsatilgan.
1-misol shaffoflik yordamida yarim shaffof blokni qanday yaratishni ko'rsatadi.
1-misol: Veb-sahifadagi fon
HTML5 CSS3 IE 9+ Cr Op Sa Fx
shaffoflik
RGBA
Odatda, dizaynga ko'ra, faqat elementning foni shaffof bo'lishi kerak va matn o'qilishi mumkin bo'lishi uchun shaffof bo'lishi kerak. Bu erda shaffoflik xususiyati mos emas, chunki element ichidagi matn ham qisman shaffof bo'ladi. Alfa-kanalga ega bo'lgan yoki boshqacha aytganda, uning bir qismi sifatida shaffoflik qiymatiga ega bo'lgan RGBA formatidan foydalanish yaxshidir. Qiymat yoziladi rgba , so'ngra qizil, ko'k va yashil rangli komponentlarning qiymatlari qavslar ichida, vergul bilan ajratilgan. Oxirgisi shaffoflik bo'lib, u 0 dan 1 gacha o'rnatiladi (1-rasm), 0 to'liq shaffoflikni va rangning 1 xiraligini bildiradi.
Guruch. 1. Rgba dan foydalanish sintaksisi
2-misolda shaffof fon yaratish uchun RGBA formatidan foydalanish ko'rsatilgan.
Misol 2. Shaffof fon
HTML5 CSS3 IE 9+ Cr Op Sa Fx
rgba
Xobbs birinchilardan bo'lib bu muammoni psixologiya nuqtai nazaridan ta'kidlagan.
Ushbu misolning natijasi rasmda ko'rsatilgan. 2. Fonning shaffofligi 90% ga o'rnatiladi.
Guruch. 2. Shaffof fon va shaffof bo'lmagan matn
CSS-da shaffof effekt yaratish uchun shaffoflik xususiyatidan foydalaniladi.
IE8 va oldingi versiyalar muqobil xususiyatni qo'llab-quvvatlaydi - filter:alpha(opacity=x) , bu erda "x" 0 dan 100 gacha bo'lishi mumkin, qiymat qanchalik past bo'lsa, element shunchalik shaffof bo'ladi.
Boshqa barcha brauzerlar standart CSS xossasining shaffofligini qo'llab-quvvatlaydi, u qiymat sifatida 0,0 dan 1,0 gacha bo'lgan raqamni qabul qilishi mumkin, qiymat qanchalik past bo'lsa, element shunchalik shaffof bo'ladi:
Hujjat nomi
Sinab ko'ring »
Hoverda shaffoflik
Pseudo-class:hover sichqoncha kursori bilan ularni ustiga olib borganingizda elementlarning ko'rinishini o'zgartirishga imkon beradi. Biz ushbu xususiyatdan sichqonchani ustiga olib kelganda tasvir shaffofligini yo‘qotish uchun foydalanamiz:
Hujjat nomi
Sinab ko'ring »
Fon shaffofligi
Elementni shaffof qilishning ikkita mumkin bo'lgan usuli mavjud: yuqorida tavsiflangan shaffoflik xususiyati va RGBA formatida fon rangini belgilash.
Siz allaqachon RGB ranglarini ko'rsatish modeli bilan tanish bo'lishingiz mumkin. RGB (Red, Green, Blue - qizil, yashil, ko'k) - qizil, yashil va ko'kni aralashtirish orqali 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 yordamida ko'rsatilgan ranglar biz ilgari ishlatgan o'n oltilik qiymatlardan farq qiladi, chunki ular alfa shaffoflik kanalidan foydalanishga imkon beradi. Bu shuni anglatadiki, alfa shaffofligi bo'lgan elementning fonida uning ostida joylashgan narsa ko'rinadi.
RGBA rangini e'lon qilish sintaksisi bo'yicha standart RGB qoidalariga o'xshaydi. Shu bilan birga, biz qiymatni RGBA (RGB o'rniga) deb e'lon qilishimiz va 0,0 (to'liq shaffof) va 1 (to'liq shaffof) orasidagi rang qiymatidan keyin qo'shimcha o'nlik shaffoflik qiymatini belgilashimiz kerak bo'ladi.
Shaffoflik xususiyati va RGBA xossasi o'rtasidagi farq shundaki, shaffoflik xususiyati butun elementga shaffoflikni qo'llaydi, ya'ni elementning butun mazmuni shaffof bo'ladi. Va RGBA sizga elementning alohida qismlariga shaffoflikni o'rnatishga imkon beradi (masalan, faqat matn yoki fon):
Asosiy (fon rasmi: url(img.jpg); ) .prim1 (kenglik: 400px; hoshiya: 30px 50px; fon rangi: #ffffff; chegara: 1px qora; shrift ogʻirligi: qalin; shaffoflik: 0,5; filtr : alpha(shaffoflik=70); /*IE8 va undan oldingi versiyalar uchun*/ matnni tekislash: markaz; ) .prim2 (kengligi: 400px; cheti: 30px 50px; fon rangi: rgba(255,255,255,0.5); chegara: 1px qattiq qora; shrift vazni: qalin; matnni tekislash: markazga; ) Sinab ko'ring »
Eslatma: RGBA qiymatlari IE8 va undan oldingi versiyalarda qo'llab-quvvatlanmaydi. Alfa rang qiymatlarini qo'llab-quvvatlamaydigan eski brauzerlar uchun zaxira rangni e'lon qilish uchun uni RGBA qiymatidan oldin belgilashingiz kerak: fon: rgb(255,255,0); fon: rgba(255,255,0,0,5);
Bugun men matn blokining shaffof foni, uni qanday qilish kerakligi va buning uchun CSS3 takliflari haqida gaplashmoqchiman. Rgba va hsla-ga o'tishdan oldin, keling, matnli blok uchun shaffof fondan foydalanish misollarini ko'rib chiqaylik, aniqrog'i, bunga qanday erishiladi va qanday muammolar paydo bo'ladi. Namoyish uchun biz Java-da biron bir dastur tomonidan qayta ishlangan va afsuski, uzoq vaqt oldin havolasi yo'qolgan ushbu rasmdan foydalanamiz.
Quyidagi rasmga qarang. Shaffof blokni matn bilan qoplamoqchi bo'lgan grafik fon mavjud. Ideal holda rasmda 2 raqami bo'lishi kerak, lekin ba'zida 3 soni ham bo'lishi mumkin.Yana bitta kamchilik bor, lekin og'zaki ravishda biroz pastroq aytib o'taman, chunki Uning skrinshotini olishning iloji yo'q edi.
Rgba va hsla holda shaffof fon
Shaffof PNG. Eng yaxshi variant, chunki Bugungi kunda bu eng o'zaro faoliyat brauzer va eng oson. Blok shaffof bo'lishi uchun blok foni sifatida o'rnatilgan bir pikselli shaffof PNG talab qilinadi. Va tamom. Kamchiliklar: Faqat bitta talab qilinadi.
Shaffoflik orqali shaffoflik. Blokning shaffofligi o'zaro brauzerda quyidagicha o'rnatiladi:
bu erda 0,5 va 50 - 50% shaffoflik. Lekin muammo bor. Agar biz blokni o'rnatsak, biz shunday shaffoflikka ega bo'lishimiz kerak, keyin biz yuqoridagi rasmda uchinchi variantni ko'ramiz - blokning mazmuni ham shaffof bo'ladi. Biroq, chiqish yo'li mavjud - erkin joylashish, uning yordamida matn bloki ostiga boshqa blok qo'yiladi, unga shaffoflik beriladi.
Keling, bir misolni ko'rib chiqaylik. To'q sariq rangli blok tana tegi bo'lsin, konteyner ham matn, ham shaffof fon - #block_bg, uning ichida shaffof fonli blok #blok_shaffof va matnli blok - #block_text.
Shuni esda tutingki, shaffof blokning kengligini (19-qator) o'rnatish kerak, aks holda u 1 pikselga tushadi va umumiy blokning kengligi (5-qator), aks holda matn shaffof blokdan tashqariga chiqadi (garchi matn uchun kenglik o'rnatilishi mumkin, lekin hech qanday asosiy farq yo'q). Matndan va shaffof blokning chetidan chekinishlar bo'lishi uchun biz oltinchi qatorda to'ldirishdan foydalanamiz. Shaffoflikni balandlikda sozlanishi uchun biz uni balandroq balandlikda (18-qator) va umumiy blok uchun (4-qator) bir-biriga yopishib olamiz. Shunday qilib, biz hamma narsani bitta blokga joylashtiramiz, uni qiziqarli fon mavjud bo'lgan sahifaning istalgan qismiga surish mumkin. Ha, siz block_bg umumiy blokiga fon qo'ymoqchi bo'lishingiz mumkin, lekin buni qilmaslik yaxshiroqdir - hayotingizni qiyinlashtirasiz (albatta, vazifaga qarab). Boshqacha qilib aytadigan bo'lsak, bu butun tuzilmani alohida blokga surish yaxshidir, unga plomba berilishi mumkin va bu haqda tashvishlanmaslik kerak. Kamchiliklar: Juda og'ir.
rgb va hsl, rgba va hsla - CSS3 xususiyatlari
Aniqrog'i, bu xususiyatlar aniq emas - bu fon, rang, chegara va boshqalar kabi xususiyatlar uchun ranglarni o'rnatishning yangi qobiliyati.
Xususiyatlarning nomlari RGB (Qizil, Yashil, Moviy) va HSL (Hue, Satuation, Lightness) rang tizimlaridan olingan. Birinchi tizim asosiy ranglarni - qizil, yashil va ko'kni aralashtirish orqali rang maydonini tasvirlaydi. Ikkinchi tizimda rang komponentlari rang haqidagi ma'lumotni odamlarga ko'proq tanish shaklda ko'rsatadi: Bu qanday rang? U qanchalik to'yingan? Bu qanchalik yorug' yoki qorong'i?
rgb va rgba
rgb va rgba dan boshlaylik. R, g, b qiymatlari 0 dan 255 gacha yoki 0% dan 100% gacha o'rnatilishi mumkin. A qiymati (alfa, shaffoflik) 0 dan 1 gacha o'lchanadi (kasr qiymatlari nuqta orqali ko'rsatilgan - 0,4, 0,7 va boshqalar). Agar r, g va b qiymatlari qabul qilinadigan diapazondan kattaroq qiymatlarga o'rnatilsa (masalan, 300 yoki 110% yoki -5), ular eng yaqin qabul qilinadigan qiymatga qisqaradi.
Keling, misol sifatida fon xususiyatidan foydalangan holda hamma narsani ko'rib chiqaylik (garchi hohlaganlar rang yoki chegara olishlari mumkin).
Ha, men shuni aytishni unutdimki, siz xususiyat va qavsni ochish o'rtasida bo'sh joy qo'yolmaysiz va bir qatorda ba'zi qiymatlarni oddiy raqamlarda, boshqalarni esa foizlarda o'rnatolmaysiz. Agar buni qilsangiz, hech narsa ishlamaydi.
hsl va hsla
Va hsl va hsla haqida bir necha so'z. A qiymati rgb va rgba bilan bir xil tarzda o'rnatiladi, lekin dastlabki uchta parametr bilan narsalar biroz farq qiladi. h 0 dan 360 gacha, s va l esa 0% dan 100% gacha o'rnatilishi mumkin.
Va eng muhimi. Agar RGB-da sizning boshingizdan rangni aniqlash juda qiyin bo'lsa (deyarli har doim sizga tomchi tomchisi bo'lgan uchinchi tomon dasturi kerak bo'lsa), bu erda hamma narsa joyiga tushishi uchun ko'z oldingizda bitta rasm bo'lishi kifoya. Rasmda h parametrining soyalari ko'rsatilgan.
Kerakli rangni baholash uchun soyani tanlang, so'ngra s, rangning to'yinganligini (bu erda 0% to'yinmagan rang (kulrang) va 100% eng to'yingan) va uning ochiqligini (0% - u bilan rang har doim bo'ladi) baholang. qora, va 100% bilan - oq). Yuqoridagilarga asoslanib, rasmda yorug'lik ohanglari 100% to'yinganlikda va 50% engillikda ko'rsatilgan.
Endi butun rang maydoni bir qarashda sizning boshingizda. Albatta, qo'lda tanlash pipetkaning o'rnini bosmaydi va har kimning boshida "rang maydoni" bo'lishi shart emas, lekin ba'zida nima kerakligini tezda aniqlash va uni sinab ko'rish uchun mos keladi.
Va tom ma'noda bir nechta misol
fon: hsl(180, 100%, 50%); /*boy ko‘k rang*/ fon: hsla(140, 50%, 30%, 0,5); /*shaffof, deyarli sezilmaydigan yashil soya*/
Kamchiliklar: Barcha 4 xususiyat eshak va eski brauzerlar tomonidan qo'llab-quvvatlanmaydi.
Tugallash
Umuman olganda, CSS3 juda foydali narsalarni taqdim etadi, lekin har doimgidek, IE taraqqiyotning asosiy tormozi hisoblanadi. Mijoz saytlari uchun men hozircha uni ishlatishdan bosh tortgan bo'lardim (ular miyamni behuda sarflashadi) va PNG bilan variantni tanlardim. Va veb-saytingizda - nima uchun emas. Ayniqsa, u eshakda o'tirmaydigan yoki antik davrning biron bir parchasi bo'lmagan ilg'or odamlar tomonidan tashrif buyurilgan bo'lsa.
Xayrli kun, veb-ishlab chiquvchilar, shuningdek, yangi boshlanuvchilar. IT tendentsiyalariga, aniqrog'i veb-modaga amal qilmaydiganlar uchun men sizga tantanali ravishda ma'lum qilmoqchimanki, "CSS vositalari bilan qanday qilib shaffof blokni yasash kerak" mavzusidagi ushbu nashr aynan sizga mos keladi. Darhaqiqat, joriy 2016 yilda onlayn xizmatlarga turli shaffof ob'ektlarning kiritilishi zamonaviy harakat deb hisoblanadi.
Shuning uchun, ushbu maqolada men sizga shaffoflikni yaratishning barcha mavjud usullari haqida gapirib beraman, antidiluvian echimlardan boshlab, men echimlarning brauzerlar bilan muvofiqligiga e'tibor qarataman, shuningdek, dastur kodining aniq misollarini keltiraman. Endi ishga kirishamiz!
1-usul. Antediluvian
Kompyuterlar hali ham zaif va "qobiliyatlar" rivojlanmagan bo'lsa, ishlab chiquvchilar shaffof fonni yaratishning o'ziga xos usullarini o'ylab topishdi: rangli piksellar bilan navbatma-navbat shaffof piksellardan foydalanish. Shu tarzda yaratilgan blok masshtablanganda shaxmat taxtasiga o'xshardi, lekin normal o'lchamda u qandaydir shaffoflikka o'xshardi.
Bu, mening fikrimcha, zamonaviy echimlar ishlamaydigan brauzerlarning eski versiyalarida "tayoqchalar" albatta yordam beradi. Ammo shuni ta'kidlash kerakki, matnni ko'rsatish sifati ,
shunday yozilgan, keskin tushadi.
2-usul. Bezovta emas
Kamdan-kam hollarda ishlab chiquvchilar shaffof tasvirni kiritish muammosini ... tayyor shaffof tasvirni kiritish orqali hal qilishadi! Shu maqsadda PNG-24 formatida saqlangan tasvirlardan foydalaniladi. Ushbu grafik format 256 shaffoflik darajasini o'rnatish imkonini beradi.
Bizning do'konimizda siz barcha turdagi gullarni topasiz.
4-usul. Zamonaviy
Bugungi kunda mutaxassislar rgba (r, g, b, a) vositasidan foydalanadilar.
Ilgari, RGB mashhur rang modellaridan biri ekanligini aytdim, bu erda R qizilning barcha soyalari uchun, G yashil ranglar uchun va B ko'k ranglar uchun javobgardir.
Css parametri bo'lsa, A o'zgaruvchisi alfa-kanal uchun javob beradi, bu esa o'z navbatida shaffoflik uchun javobgardir.
Oxirgi usulning asosiy afzalligi shundaki, alfa kanali stilize qilingan blok ichida joylashgan ob'ektlarga ta'sir qilmaydi.
rgba(r, g, b, a) quyidagidan boshlab qo'llab-quvvatlanadi:
Opera versiyasi 10;
Internet Explorer 9;
Safari 3.2;
Firefox-ning 3 ta versiyasi.
Men bir qiziq faktni ta'kidlamoqchiman! Sevimli Internet Explorer 7 xususiyatlarni birlashtirishda xatoga yo'l qo'yadi fon rangi ranglar nomi bilan (fon-rang: oltin). Shuning uchun siz faqat quyidagilarni ishlatishingiz kerak: