Photoshop zmení farbu na priehľadnú. Priehľadná farba a pozadie v CSS. Nastavte priehľadnosť pre pozadie CSS

V niektorých prípadoch, napríklad pri návrhu webstránky, sa môžete stretnúť so situáciou, kedy pozadie obrázka nijako nezodpovedá farbe samotnej webstránky. Samozrejmým riešením je urobiť toto pozadie priehľadným.

Budete potrebovať

• - Adobe Photoshop.

Inštrukcie

Hlavná vec je určiť obrázok v počítači alebo telefóne a potom kliknite na tlačidlo OK v dolnej časti tejto stránky. Štandardne sa obyčajné pozadie obrázka nahradí priehľadným. Farba pozadia pôvodného obrázka sa určí automaticky, stačí v nastaveniach určiť, akou farbou ho nahradiť. Hlavným parametrom ovplyvňujúcim kvalitu náhrady je „Intenzita výmeny“ a môže byť pre každý obrázok iná.

Príklad fotografie ružovej ruže bez zmien a po nahradení obyčajného pozadia priehľadným, bielym a zeleným:

Prvý príklad s kvetom ruže na priehľadnom pozadí s nasledujúcimi nastaveniami:
  1) Náhradná intenzita - 38;
  2) Vyhladenie pozdĺž okrajov - 5;
  3) Vymeňte obyčajné pozadie za priehľadné;
  4) Orezávanie (<0) или Добавление (>0) na okrajoch - "-70";
  5) Invertovať - ​​vypnuté (nezačiarknuté).

Na tvorenie druhý príklad, s bielym pozadím, boli použité rovnaké nastavenia ako v prvom príklade, s výnimkou parametra: „Nahradiť obyčajné pozadie“ - biele. IN tretí príklad, so zeleným pozadím sa tiež použijú nastavenia ako v prvom príklade, okrem parametra: „farba v hexadecimálnom formáte“ - #245a2d.

Pôvodný obrázok sa nijako nemení. Dostanete ďalší spracovaný obrázok s priehľadným alebo špecifikovaným pozadím.

Ako nastaviť priehľadnú farbu v css? V súčasnosti existujú 3 spôsoby, ako to urobiť.

Metóda 1 - hodnota transparentná

Ak nastavíte hodnotu farby textu alebo pozadia na transparentnú , farba bude úplne priehľadná, čiže neviditeľná. Príklad:

Farba: transparentná;

Takýto text nebude na stránke viditeľný.

Metóda 2 - farebný režim rgba

A toto je inovácia css3. Predtým vo vývoji webu takýto režim neexistoval, existoval iba rgb. Určite viete, ako zaznamenať farbu v tomto formáte. Ak to chcete urobiť, musíte zadať tri hodnoty v zátvorkách od 0 do 255, ktoré označujú sýtosť jednej z troch základných farieb (červená, zelená, modrá). Napríklad:

Pozadie: rgb(230, 121, 156);

Formát rgba nie je iný, len pridáva štvrtú hodnotu – stupeň priehľadnosti prvku od 0 do 1. Vo všeobecnosti sa tento formát záznamu používa hlavne na nastavenie priesvitnej farby, a nie úplnej priehľadnosti. Na dosiahnutie úplnej transparentnosti stačí napísať 0 ako štvrtú hodnotu.

Pozadie: rgba(0, 0, 0, 0);

V tomto prípade zostávajúce 3 číslice nehrajú osobitnú úlohu.

Priesvitnú farbu je možné nastaviť, ak je štvrtý parameter nastavený na hodnotu od 0,01 do 0,99. O nastavení priesvitnosti pozadia som už niečo málo písal v , v prípade záujmu si to môžete prečítať.

Metóda 3 - nepriehľadnosť

Ďalšia vlastnosť z technológie css3. Ale chcem vás hneď upozorniť, že to funguje trochu inak. Nepriehľadnosť nastavuje priehľadnosť celého bloku, na ktorý sa aplikuje. Zhoršuje sa tak čitateľnosť textu a vnímanie obrázkov. Zmysel použitia tejto vlastnosti teda vidím len pri blokoch, ktoré neobsahujú text ani žiadne iné informácie. Hodnoty je možné nastaviť od 0 do 1, ako je to v prípade štvrtého parametra pri zadávaní farby vo formáte rgba.

Vo všeobecnosti sú to v súčasnosti všetky spôsoby, ktoré poznám, ako nastaviť priehľadnú farbu v CSS. Prečo je to potrebné, je iná otázka. Cez priehľadné pozadie je vidieť to, čo je pod ním. Niekedy to treba takto urobiť dizajnovo. Vo všeobecnosti je dnes technika translucencie veľmi bežná.

Priehľadné pozadie

Ako možno viete, pozadie je vlastnosť CSS, ktorá vám umožňuje nastaviť farbu pozadia alebo načítať obrázok, ktorý bude slúžiť ako pozadie.

Nastavte priehľadnosť pre pozadie CSS

To všetko sa teda robí veľmi jednoducho vďaka formátu záznamu farieb, akým je rgba. Ak pracujete s grafickými editormi, pravdepodobne viete, že farebný režim rgb znamená: podiel červenej (červená), podiel zelenej (zelená) a modrej (modrá). Takže rgba je prakticky to isté, len je pridaný ďalší parameter - priehľadnosť. Píše sa to takto:

Farba pozadia: rgba (173, 57, 22, 0,5)

Najprv výslovne naznačíme, že nastavujeme farbu v režime rgba. Potom uvádzame hodnoty sýtosti troch základných farieb od 0 do 255, kde 255 je najvyššia sýtosť. Štvrtým parametrom je naša transparentnosť. Tu je napísaná hodnota od 0 do jedna. 1 je úplne nepriehľadný prvok a 0 je úplne priehľadný prvok. Ak teda nastavíte hodnotu 0, farba pozadia nebude vôbec viditeľná.

Teraz viete, ako nastaviť vlastnosť pozadia na priehľadnosť v CSS. Ak to chcete urobiť, musíte použiť farebný režim rgba. Existuje aj vlastnosť nepriehľadnosti, ktorá sa však vzťahuje na celý prvok ako celok. To znamená, že pri použití nepriehľadnosti možno na text použiť priehľadnosť, čím sa stane nečitateľný.

Príklad transparentného pozadia

Výhody priesvitného pozadia sa dajú ľahko ukázať na príklade. Napríklad máme všeobecné pozadie stránky. Takto by vyzeral blok, keby dostal plnú čiernu farbu:

Teraz nastavíme bloku rovnakú čiernu farbu, ale špecifikujeme ju pomocou farebného formátu rgba, pričom ako poslednú hodnotu uvedieme napríklad 0,7. Dopadne to takto:

Teraz je cez neho viditeľné pozadie bloku a je cez neho viditeľný obrázok na pozadí. Tento obrázok a pozadie sú len príklady. Ako si viete predstaviť, priehľadnosť pozadia v css sa môže hodiť, keď chcete, aby pozadie vnoreného prvku presvitalo bez zakrytia iných pozadí umiestnených v iných vrstvách.

Samotné nastavenie farby pomocou rgba nie je zložité. Ako už bolo spomenuté, prvé tri písmená znamenajú tri základné farby: červenú, zelenú a modrú, alebo skôr ich podiel (od 0 do 255). Nastavením rôznych hodnôt môžete získať milióny rôznych farieb a priesvitnosť vám v prípade potreby umožní vymyslieť pre stránku oveľa krajšie efekty.