Photoshop schimbă culoarea în transparent. Culoare și fundal transparente în CSS. Setați transparența pentru fundal CSS

Photoshop schimbă culoarea în transparent. Culoare și fundal transparente în CSS. Setați transparența pentru fundal CSS
Photoshop schimbă culoarea în transparent. Culoare și fundal transparente în CSS. Setați transparența pentru fundal CSS
02.06.2024

În unele cazuri, de exemplu, atunci când proiectați un site web, puteți întâlni o situație în care fundalul imaginii nu se potrivește în niciun fel cu culoarea site-ului în sine. Soluția evidentă este de a face acest fundal transparent.

Vei avea nevoie

  • - Adobe Photoshop.

Instrucțiuni

  • Deschideți imaginea dorită în Adobe Photoshop (elementul de meniu „Fișier” -> „Deschidere” sau tastele rapide Ctrl + O). Faceți clic pe elementul de meniu „Selectați” -> „Gama de culori”. Va apărea fereastra Gama de culori.
  • Găsiți elementul „Selectați”, acesta se află chiar în partea de sus a ferestrei. Apasa pe el. În meniul care se deschide, puteți selecta un grup de culori sau tonuri, care ulterior pot fi transparente. Acestea. doar culori roșii, doar verde, albastru sau doar tonuri medii, umbre etc. Dacă trebuie să selectați în mod specific o culoare, indicați „După mostre” în acest paragraf.
  • Găsiți elementul „Fuzziness” – acesta poate fi folosit pentru a extinde gama de culori selectate. Mai jos sunt elementele „Zona selectată” și „Imagine”. Dacă îl selectați pe primul, zona selectată va fi pre-afișată în fereastra de previzualizare a programului. Dacă este al doilea, atunci întreaga imagine va fi afișată.
  • În partea dreaptă a ferestrei sunt trei butoane cu imaginea pipetelor. Pe primul dintre ele există pur și simplu o pipetă, pe a doua este o pipetă cu un plus, iar pe a treia este o pipetă cu un minus. Faceți clic pe primul și faceți clic în fereastra de previzualizare sau pe documentul însuși pe culoarea pe care doriți să o faceți transparentă. Selectați Selecție pentru a vedea ce zone ale imaginii au fost selectate.
  • Dacă doriți să adăugați o altă culoare celei selectate, faceți clic pe Eyedropper+ și apoi faceți clic pe acea culoare. Dacă o reduceți, procedați în același mod, folosind doar „Pipeta-”. După ce ați selectat culoarea (culorile) dorită, faceți clic pe OK. După cum puteți vedea, culorile selectate au devenit evidențiate în document.
  • În lista de straturi (dacă lipsește, apăsați F7), faceți clic dreapta pe fundal, în meniul care apare, selectați „Din fundal”, iar în fereastra următoare - imediat OK. Fundalul se va transforma într-un strat. Apăsați Ștergere de pe tastatură. Zonele selectate vor deveni transparente.

    • Principalul lucru este să specificați imaginea pe computer sau pe telefon, apoi faceți clic pe OK în partea de jos a acestei pagini. În mod implicit, fundalul simplu al imaginii este înlocuit cu unul transparent. Culoarea de fundal a imaginii originale este determinată automat, trebuie doar să specificați în setări cu ce culoare să o înlocuiți. Principalul parametru care influențează calitatea înlocuirii este „Intensitatea înlocuirii” și poate fi diferit pentru fiecare imagine.

    Un exemplu de fotografie a unui trandafir roz fără modificări și după înlocuirea fundalului simplu cu transparent, alb și verde:


    Primul exemplu cu o floare de trandafir pe un fundal transparent realizat cu următoarele setări:
      1) Intensitatea înlocuirii - 38;
      2) Netezirea de-a lungul marginilor - 5;
      3) Înlocuiți fundalul simplu cu unul transparent;
      4) Tunderea (<0) или Добавление (>0) la margini - „-70”;
      5) Invers - dezactivat (nebifat).

    Pentru a crea al doilea exemplu, cu un fundal alb, s-au folosit aceleași setări ca în primul exemplu, cu excepția parametrului: „Înlocuiește fundalul simplu cu” - alb. ÎN al treilea exemplu, cu un fundal verde, setările sunt și ele folosite ca în primul exemplu, cu excepția parametrului: „culoare în format hex” - #245a2d.

    Imaginea originală nu este modificată în niciun fel. Vi se va furniza o altă imagine procesată cu un fundal transparent sau specificat.

    1) Specificați o imagine în format BMP, GIF, JPEG, PNG, TIFF:

    2) Setări pentru înlocuirea unui fundal solid
    Intensitatea înlocuirii: (1-100)

    Netezirea marginilor: (0-100) Înlocuiți fundalul simplu cu: transparent (numai PNG-24) roșu roz violet albastru turcoaz cer verde lime galben portocaliu negru gri alb sau culoare în format hex: deschideți paleta Decupare (<0) или Добавление (>0) la margini: (-100 până la 100)
    (Intensitate pentru decuparea suplimentară sau adăugarea de pixeli în jurul unei zone selectate pe un fundal transparent) Inverseaza selectia (înlocuiește primul plan în loc de fundal)

    Cum se setează culoarea transparentă în css? În prezent, există 3 moduri de a face acest lucru.

    Metoda 1 - valoare transparentă

    Dacă setați valoarea textului sau a culorii de fundal la transparent , culoarea va fi complet transparentă, adică invizibilă. Exemplu:

    Culoare: transparent;

    Un astfel de text nu va fi vizibil pe pagină.

    Metoda 2 - modul de culoare rgba

    Și aceasta este o inovație CSS3. Anterior, nu exista un astfel de mod în dezvoltarea web, exista doar rgb. Cu siguranță știi să înregistrezi culoarea în acest format. Pentru a face acest lucru, trebuie să specificați trei valori între paranteze de la 0 la 255, indicând saturația uneia dintre cele trei culori primare (roșu, verde, albastru). De exemplu:

    Fundal: rgb(230, 121, 156);

    Formatul rgba nu este diferit, doar adaugă o a patra valoare - gradul de transparență al elementului de la 0 la 1. În general, acest format de înregistrare este utilizat în principal pentru a seta o culoare translucidă, mai degrabă decât complet transparentă. Pentru a obține o transparență deplină, trebuie doar să scrieți 0 ca a patra valoare.

    Fundal: rgba(0, 0, 0, 0);

    În acest caz, restul de 3 cifre nu joacă un rol special.

    O culoare translucidă poate fi setată dacă al patrulea parametru este setat la o valoare de la 0,01 la 0,99. Am scris deja puțin despre setarea translucidității pentru fundal în , îl puteți citi dacă vă interesează.

    Metoda 3 - opacitatea

    O altă proprietate a tehnologiei css3. Dar vreau să vă avertizez imediat că funcționează puțin diferit. Opacitatea stabilește transparența întregului bloc la care este aplicat. Astfel, lizibilitatea textului și percepția imaginilor se deteriorează. Așa că văd rostul folosirii acestei proprietăți numai pentru blocurile care nu conțin text sau alte informații. Valorile pot fi setate de la 0 la 1, așa cum este cazul celui de-al patrulea parametru la specificarea unei culori în format rgba.

    În general, în acest moment, acestea sunt toate modalitățile pe care le cunosc de a seta o culoare transparentă în CSS. De ce este nevoie de acest lucru este o altă întrebare. Printr-un fundal transparent se vede ceea ce este dedesubt. Uneori trebuie făcut în acest fel prin proiectare. În general, tehnica translucidității este foarte comună astăzi.

    Fundal transparent

    După cum probabil știți, fundalul este o proprietate CSS care vă permite să setați o culoare de fundal sau să încărcați o imagine pentru a acționa ca fundal.

    Setați transparența pentru fundalul CSS

    Deci, toate acestea se realizează foarte simplu datorită unui format de înregistrare color precum rgba. Dacă lucrați cu editori grafici, atunci probabil știți că modul de culoare rgb înseamnă: proporția de roșu (roșu), proporția de verde (verde) și albastru (albastru). Deci, rgba este practic același, se mai adaugă un singur parametru - transparența. Este scris astfel:

    Culoare de fundal: rgba(173, 57, 22, 0,5)

    Mai întâi indicăm în mod explicit că setăm culoarea în modul rgba. Apoi indicăm valorile de saturație ale celor trei culori primare de la 0 la 255, unde 255 este cea mai mare saturație. Al patrulea parametru este transparența noastră. Valoarea de la 0 la unu este scrisă aici. 1 este un element complet opac, iar 0 este un element complet transparent. În consecință, dacă îl setați la 0, atunci culoarea de fundal nu va fi vizibilă deloc.

    Acum știți cum să setați proprietatea de fundal la transparență în CSS. Pentru a face acest lucru, trebuie să utilizați modul de culoare rgba. Există, de asemenea, o proprietate de opacitate, dar se aplică întregului element ca întreg. Adică, atunci când se aplică opacitatea, transparența poate fi aplicată textului, făcându-l ilizibil.

    Exemplu de fundal transparent

    Avantajele unui fundal translucid sunt ușor de arătat cu un exemplu. De exemplu, avem un fundal general al paginii. Iată cum ar arăta blocul dacă i s-ar oferi o culoare neagră solidă:

    Acum să setăm aceeași culoare neagră pentru bloc, dar să o specificăm folosind formatul de culoare rgba, specificând ultima valoare ca 0,7, de exemplu. Se va dovedi astfel:

    Acum fundalul blocului este vizibil prin el și imaginea de fundal este vizibilă prin el. Această imagine și fundalul sunt doar de exemplu. După cum vă puteți imagina, transparența de fundal în CSS poate fi utilă atunci când doriți ca fundalul unui element imbricat să se arate fără a ascunde alte fundaluri situate pe alte straturi.

    Setarea culorii în sine folosind rgba nu este dificilă. După cum am menționat deja, primele trei litere înseamnă cele trei culori primare: roșu, verde și albastru, sau mai degrabă cota lor (de la 0 la 255). Prin setarea unor valori diferite, puteți obține milioane de culori diferite, iar transluciditatea vă va permite să veniți cu efecte mult mai frumoase pentru site, dacă este necesar.