„Photoshop“ pakeis spalvą į skaidrią. Skaidri spalva ir fonas CSS. Nustatykite CSS fono skaidrumą

Kai kuriais atvejais, pavyzdžiui, kuriant interneto svetainę galite susidurti su situacija, kai vaizdo fonas niekaip nesutampa su pačios svetainės spalva. Akivaizdus sprendimas yra padaryti šį foną skaidrų.

Jums reikės

• - Adobe Photoshop.

Instrukcijos

Svarbiausia yra nurodyti paveikslėlį kompiuteryje ar telefone, tada šio puslapio apačioje spustelėkite Gerai. Pagal numatytuosius nustatymus paprastas nuotraukos fonas pakeičiamas skaidriu. Pradinio vaizdo fono spalva nustatoma automatiškai, tereikia nustatymuose nurodyti, kokia spalva jį pakeisti. Pagrindinis parametras, turintis įtakos pakeitimo kokybei, yra „Pakeitimo intensyvumas“ ir jis gali skirtis kiekvienai nuotraukai.

Rožinės rožės nuotraukos pavyzdys be pakeitimų ir paprastą foną pakeitus skaidriu, baltu ir žaliu:

Pirmas pavyzdys su rožės gėle permatomame fone, padaryta tokiais nustatymais:
  1) Keitimo intensyvumas - 38;
  2) Išlyginimas išilgai kraštų - 5;
  3) Paprastą foną pakeiskite skaidriu;
  4) kirpimas (<0) или Добавление (>0) kraštuose - "-70";
  5) Invert – išjungta (nepažymėta).

Už kūrimą antras pavyzdys, su baltu fonu, buvo naudojami tie patys nustatymai kaip ir pirmame pavyzdyje, išskyrus parametrą: „Pakeisti paprastą foną su“ - balta. IN trečias pavyzdys, su žaliame fone, nustatymai taip pat naudojami kaip pirmame pavyzdyje, išskyrus parametrą: „spalva šešioliktainiu formatu“ - #245a2d.

Originalus vaizdas niekaip nesikeičia. Jums bus pateiktas kitas apdorotas vaizdas su skaidriu arba nurodytu fonu.

Kaip nustatyti skaidrią spalvą css? Šiuo metu yra 3 būdai tai padaryti.

1 metodas – reikšmė skaidri

Jei teksto arba fono spalvos reikšmę nustatysite į skaidrią , spalva bus visiškai skaidri, ty nematoma. Pavyzdys:

Spalva: skaidri;

Toks tekstas puslapyje nebus matomas.

2 būdas – rgba spalvų režimas

Ir tai yra css3 naujovė. Anksčiau interneto kūrime tokio režimo nebuvo, buvo tik rgb. Tikrai žinote, kaip įrašyti spalvas šiuo formatu. Norėdami tai padaryti, turite nurodyti tris reikšmes skliausteliuose nuo 0 iki 255, nurodant vienos iš trijų pagrindinių spalvų (raudonos, žalios, mėlynos) sodrumą. Pavyzdžiui:

Fonas: rgb(230, 121, 156);

Rgba formatas niekuo nesiskiria, jis tik prideda ketvirtą reikšmę – elemento skaidrumo laipsnį nuo 0 iki 1. Apskritai šis įrašymo formatas daugiausia naudojamas norint nustatyti permatomą spalvą, o ne visiškai skaidrią. Norint pasiekti visišką skaidrumą, tereikia parašyti 0 kaip ketvirtą reikšmę.

Fonas: rgba(0, 0, 0, 0);

Šiuo atveju likę 3 skaitmenys nevaidina ypatingo vaidmens.

Permatomą spalvą galima nustatyti, jei ketvirtasis parametras nustatytas į vertę nuo 0,01 iki 0,99. Jau šiek tiek rašiau apie fono permatomumo nustatymą , jei susidomėjote, galite perskaityti.

3 būdas – neskaidrumas

Kita css3 technologijos savybė. Tačiau iš karto noriu perspėti, kad tai veikia šiek tiek kitaip. Esant neskaidrumui, skaidrumas nustatomas visam blokui, kuriam jis taikomas. Taigi pablogėja teksto skaitomumas ir paveikslų suvokimas. Taigi matau prasmę naudoti šią savybę tik blokams, kuriuose nėra teksto ar kitos informacijos. Vertes galima nustatyti nuo 0 iki 1, kaip ir ketvirtojo parametro atveju, kai nurodoma spalva rgba formatu.

Apskritai šiuo metu tai yra visi man žinomi būdai, kaip nustatyti skaidrią spalvą CSS. Kam to reikia – kitas klausimas. Per skaidrų foną galima pamatyti, kas yra apačioje. Kartais tai turi būti padaryta pagal dizainą. Apskritai peršviečiamumo technika šiandien yra labai paplitusi.

Skaidrus fonas

Galbūt žinote, kad fonas yra CSS nuosavybė, leidžianti nustatyti fono spalvą arba įkelti vaizdą, kuris veiktų kaip fonas.

Nustatykite CSS fono skaidrumą

Taigi, visa tai daroma labai paprastai dėka spalvoto įrašymo formato, pavyzdžiui, rgba. Jei dirbate su grafiniais redaktoriais, tikriausiai žinote, kad rgb spalvų režimas reiškia: raudonos (raudonos), žalios (žalia) ir mėlynos (mėlynos) proporciją. Taigi, rgba praktiškai tas pats, tik pridedamas dar vienas parametras – skaidrumas. Tai parašyta taip:

Fono spalva: rgba (173, 57, 22, 0,5)

Pirmiausia aiškiai nurodome, kad spalvą nustatome rgba režimu. Tada nurodome trijų pagrindinių spalvų sodrumo vertes nuo 0 iki 255, kur 255 yra didžiausias sodrumas. Ketvirtasis parametras yra mūsų skaidrumas. Čia rašoma reikšmė nuo 0 iki vieneto. 1 yra visiškai nepermatomas elementas, o 0 yra visiškai skaidrus elementas. Atitinkamai, jei nustatysite jį į 0, fono spalva iš viso nebus matoma.

Dabar žinote, kaip nustatyti fono ypatybę į skaidrumą CSS. Norėdami tai padaryti, turite naudoti rgba spalvų režimą. Taip pat yra neskaidrumo savybė, tačiau ji taikoma visam elementui kaip visumai. Tai yra, taikant neskaidrumą, tekstui galima pritaikyti skaidrumą, todėl jis tampa neįskaitomas.

Skaidraus fono pavyzdys

Permatomo fono pranašumus lengva parodyti pavyzdžiu. Pavyzdžiui, turime bendrą puslapio foną. Štai kaip blokas atrodytų, jei jam būtų suteikta vientisa juoda spalva:

Dabar blokui nustatykime tą pačią juodą spalvą, bet nurodykite ją naudodami rgba spalvos formatą, nurodydami paskutinę reikšmę, pavyzdžiui, 0,7. Tai pasirodys taip:

Dabar per jį matomas bloko fonas, o per jį matomas fono vaizdas. Šis paveikslėlis ir fonas yra tik pavyzdys. Kaip galite įsivaizduoti, CSS fono skaidrumas gali būti naudingas, kai norite, kad įdėto elemento fonas būtų matomas neužgožiant kitų fonų, esančių kituose sluoksniuose.

Pačią spalvą nustatyti naudojant rgba nėra sunku. Kaip jau minėta, pirmosios trys raidės reiškia tris pagrindines spalvas: raudoną, žalią ir mėlyną, tiksliau jų dalį (nuo 0 iki 255). Nustatę skirtingas reikšmes galite gauti milijonus skirtingų spalvų, o peršviečiamumas leis prireikus sukurti daug gražesnių svetainės efektų.