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