Photoshop rangni shaffofga o'zgartiradi. CSS-da shaffof rang va fon. CSS foni uchun shaffoflikni o'rnating

Photoshop rangni shaffofga o'zgartiradi. CSS-da shaffof rang va fon. CSS foni uchun shaffoflikni o'rnating
Photoshop rangni shaffofga o'zgartiradi. CSS-da shaffof rang va fon. CSS foni uchun shaffoflikni o'rnating
02.06.2024

Ba'zi hollarda, masalan, veb-saytni loyihalashda siz rasmning foni veb-saytning rangiga hech qanday mos kelmaydigan vaziyatga duch kelishingiz mumkin. Aniq yechim bu fonni shaffof qilishdir.

Sizga kerak bo'ladi

  • - Adobe Photoshop.

Ko'rsatmalar

  • Adobe Photoshop-da kerakli tasvirni oching ("Fayl" -> "Ochish" menyusi yoki Ctrl + O tezkor tugmalari). "Tanlash" -> "Rang diapazoni" menyu bandini bosing. Rang diapazoni oynasi paydo bo'ladi.
  • "Tanlash" bandini toping, u oynaning eng yuqori qismida joylashgan. Unga bosing. Ochilgan menyuda siz ranglar yoki ohanglar guruhini tanlashingiz mumkin, ular keyinchalik shaffof bo'lishi mumkin. Bular. faqat qizil ranglar, faqat yashil, ko'k yoki faqat o'rta tonlar, soyalar va boshqalar. Agar siz alohida rangni tanlashingiz kerak bo'lsa, ushbu bandda "Namunalar bo'yicha" ni ko'rsating.
  • "Fuzziness" elementini toping - u tanlangan ranglar oralig'ini kengaytirish uchun ishlatilishi mumkin. Quyida "Tanlangan maydon" va "Rasm" elementlari mavjud. Agar siz birinchisini tanlasangiz, tanlangan maydon dasturni oldindan ko'rish oynasida oldindan ko'rsatiladi. Agar ikkinchisi bo'lsa, unda butun rasm ko'rsatiladi.
  • Oynaning o'ng tomonida pipetkalar tasvirlangan uchta tugma mavjud. Ulardan birinchisida oddiygina pipetka, ikkinchisida plyusli pipetka, uchinchisida esa minusli pipetka mavjud. Birinchisini bosing va oldindan ko'rish oynasida yoki hujjatning o'zida shaffof qilmoqchi bo'lgan rangni bosing. Tasvirning qaysi joylari tanlanganligini ko'rish uchun Tanlash-ni tanlang.
  • Tanlangan rangga boshqa rang qo'shmoqchi bo'lsangiz, Damlatıcı+ ni bosing va keyin o'sha rangni bosing. Agar siz uni rad qilsangiz, xuddi shu tarzda, faqat "Pipetka-" yordamida davom eting. O'zingiz xohlagan rang(lar)ni tanlaganingizdan so'ng OK tugmasini bosing. Ko'rib turganingizdek, tanlangan ranglar hujjatda ta'kidlangan.
  • Qatlamlar ro'yxatida (agar u yo'q bo'lsa, F7 tugmasini bosing), fonni o'ng tugmasini bosing, paydo bo'lgan menyuda "From fon" ni tanlang va keyingi oynada - darhol OK. Fon qatlamga aylanadi. Klaviaturangizda "O'chirish" tugmasini bosing. Tanlangan joylar shaffof bo'ladi.

    • Asosiysi, kompyuteringiz yoki telefoningizdagi rasmni belgilang va keyin ushbu sahifaning pastki qismidagi OK tugmasini bosing. Odatiy bo'lib, rasmning oddiy foni shaffof bilan almashtiriladi. Asl tasvirning fon rangi avtomatik ravishda aniqlanadi, siz faqat sozlamalarda uni qanday rang bilan almashtirishni ko'rsatishingiz kerak; O'zgartirish sifatiga ta'sir qiluvchi asosiy parametr "O'zgartirish intensivligi" bo'lib, har bir rasm uchun u boshqacha bo'lishi mumkin.

    O'zgarishsiz va oddiy fonni shaffof, oq va yashil rangga almashtirgandan keyin pushti atirgulning fotosuratiga misol:


    Birinchi misol shaffof fonda atirgul gul bilan quyidagi sozlamalar bilan qilingan:
      1) Almashtirish intensivligi - 38;
      2) qirralarning bo'ylab silliqlash - 5;
      3) Oddiy fonni shaffof bilan almashtiring;
      4) kesish (<0) или Добавление (>0) chetlarida - "-70";
      5) Invert - o'chirilgan (belgilanmagan).

    Yaratish uchun ikkinchi misol, oq fon bilan bir xil sozlamalar birinchi misolda bo'lgani kabi ishlatilgan, bundan mustasno: "Oddiy fonni almashtirish" - oq. IN uchinchi misol, yashil fon bilan sozlamalar birinchi misoldagi kabi ishlatiladi, parametrdan tashqari: "olti burchakli formatdagi rang" - #245a2d.

    Asl tasvir hech qanday tarzda o'zgartirilmaydi. Sizga shaffof yoki belgilangan fonga ega boshqa qayta ishlangan rasm taqdim etiladi.

    1) BMP, GIF, JPEG, PNG, TIFF formatidagi rasmni belgilang:

    2) Qattiq fonni almashtirish uchun sozlamalar
    O'zgartirish intensivligi: (1-100)

    Chetlarni tekislash: (0-100) Oddiy fonni quyidagi bilan almashtiring: shaffof (faqat PNG-24) qizil pushti binafsharang ko‘k turkuaz osmon ohak yashil sariq to‘q sariq qora kulrang oq yoki olti burchakli formatdagi rang: kesish palitrasini oching (<0) или Добавление (>0) chetlarida: (-100 dan 100 gacha)
    (Tanlangan maydon atrofida shaffof fonda qo'shimcha kesish yoki piksel qo'shish intensivligi) Tanlovni o'zgartirish (fon o'rniga oldingi fonni almashtiring)

    CSS-da shaffof rangni qanday o'rnatish mumkin? Hozirda buni amalga oshirishning 3 ta usuli mavjud.

    1-usul - qiymat shaffof

    Agar siz matn yoki fon rangining qiymatini shaffof qilib qo'ysangiz, rang butunlay shaffof, ya'ni ko'rinmas bo'ladi. Misol:

    Rang: shaffof;

    Bunday matn sahifada ko'rinmaydi.

    2-usul - rgba rang rejimi

    Va bu css3 innovatsiyasi. Ilgari veb-ishlab chiqishda bunday rejim yo'q edi, faqat rgb bor edi. Albatta, siz ushbu formatda rangni qanday yozishni bilasiz. Buni amalga oshirish uchun siz uchta asosiy rangdan (qizil, yashil, ko'k) birining to'yinganligini ko'rsatadigan 0 dan 255 gacha bo'lgan qavslar ichida uchta qiymatni belgilashingiz kerak. Masalan:

    Fon: rgb(230, 121, 156);

    Rgba formati boshqacha emas, u faqat to'rtinchi qiymatni qo'shadi - 0 dan 1 gacha bo'lgan elementning shaffoflik darajasi. Umuman olganda, bu yozish formati asosan butunlay shaffof emas, balki shaffof rangni o'rnatish uchun ishlatiladi. To'liq shaffoflikka erishish uchun to'rtinchi qiymat sifatida 0 ni yozish kifoya.

    Fon: rgba(0, 0, 0, 0);

    Bunday holda, qolgan 3 ta raqam alohida rol o'ynamaydi.

    To'rtinchi parametr 0,01 dan 0,99 gacha bo'lgan qiymatga o'rnatilgan bo'lsa, shaffof rang o'rnatilishi mumkin. Men allaqachon fon uchun shaffoflikni o'rnatish haqida bir oz yozganman, agar qiziqsangiz, uni o'qishingiz mumkin.

    3-usul - shaffoflik

    Css3 texnologiyasidan yana bir xususiyat. Lekin men sizni darhol ogohlantirmoqchiman, bu biroz boshqacha ishlaydi. Shaffoflik u qo'llaniladigan butun blokning shaffofligini o'rnatadi. Shunday qilib, matnning o'qilishi va rasmlarni idrok etish yomonlashadi. Shunday qilib, men ushbu xususiyatni faqat matn yoki boshqa ma'lumotlarni o'z ichiga olmaydigan bloklar uchun ishlatish nuqtasini ko'raman. Rgba formatida rangni belgilashda to'rtinchi parametrda bo'lgani kabi, qiymatlar 0 dan 1 gacha o'rnatilishi mumkin.

    Umuman olganda, hozirda men CSS-da shaffof rangni o'rnatishning barcha usullarini bilaman. Bu nima uchun kerak - boshqa savol. Shaffof fon orqali uning ostida nima borligini ko'rish mumkin. Ba'zan dizayn bo'yicha bu tarzda amalga oshirilishi kerak. Umuman olganda, shaffoflik texnikasi bugungi kunda juda keng tarqalgan.

    Shaffof fon

    Ma'lumki, fon - bu fon rangini o'rnatish yoki fon sifatida ishlash uchun rasmni yuklash imkonini beruvchi CSS xususiyati.

    CSS foni uchun shaffoflikni o'rnating

    Shunday qilib, bularning barchasi rgba kabi rangli yozuv formati tufayli juda oddiy tarzda amalga oshiriladi. Agar siz grafik muharrirlar bilan ishlasangiz, ehtimol siz rgb rang rejimi nimani anglatishini bilasiz: qizil (qizil) nisbati, yashil (yashil) va ko'k (ko'k) nisbati. Shunday qilib, rgba deyarli bir xil, faqat bitta parametr qo'shiladi - shaffoflik. Bu shunday yozilgan:

    Fon rangi: rgba(173, 57, 22, 0,5)

    Avval biz rangni rgba rejimida o'rnatayotganimizni aniq ko'rsatamiz. Keyin biz uchta asosiy rangning to'yinganlik qiymatlarini 0 dan 255 gacha ko'rsatamiz, bu erda 255 eng yuqori to'yinganlikdir. To'rtinchi parametr - bu bizning shaffofligimiz. Bu yerda 0 dan birgacha qiymat yoziladi. 1 butunlay shaffof element, 0 esa butunlay shaffof element. Shunga ko'ra, agar siz uni 0 ga qo'ysangiz, u holda fon rangi umuman ko'rinmaydi.

    Endi siz CSS-da fon xususiyatini shaffoflikka qanday o'rnatishni bilasiz. Buning uchun siz rgba rang rejimidan foydalanishingiz kerak. Shaffoflik xususiyati ham mavjud, lekin u butun elementga tegishli. Ya'ni shaffoflikni qo'llashda matnga shaffoflik qo'llanilishi mumkin, bu esa uni o'qib bo'lmaydi.

    Shaffof fon misol

    Shaffof fonning afzalliklarini misol bilan ko'rsatish oson. Misol uchun, bizda umumiy sahifa foni mavjud. Agar blok qora rangga ega bo'lsa, shunday ko'rinadi:

    Endi blokga bir xil qora rangni o'rnatamiz, lekin uni rgba rang formati yordamida belgilang, masalan, oxirgi qiymatni 0,7 deb belgilang. Bu shunday bo'ladi:

    Endi u orqali blokning foni ko'rinadi va u orqali fon tasviri ko'rinadi. Bu rasm va fon faqat misol uchun. Tasavvur qilganingizdek, CSS-da fon shaffofligi, agar siz ichki o'rnatilgan elementning fonini boshqa qatlamlarda joylashgan boshqa fonlarni yashirmasdan ko'rsatishni istasangiz foydali bo'lishi mumkin.

    Rgba yordamida rangning o'zini o'rnatish qiyin emas. Yuqorida aytib o'tilganidek, birinchi uchta harf uchta asosiy rangni anglatadi: qizil, yashil va ko'k, aniqrog'i ularning ulushi (0 dan 255 gacha). Turli xil qiymatlarni o'rnatish orqali siz millionlab turli xil ranglarni olishingiz mumkin va shaffoflik, agar kerak bo'lsa, sayt uchun juda chiroyli effektlarni yaratishga imkon beradi.