Vítam všetkých. Dnes vám ukážem, ako nastaviť priehľadnú farbu v css. V súčasnosti existujú 3 spôsoby, ako to urobiť.

Metóda 1 - transparentná hodnota

Ak nastavíte farbu textu alebo pozadia na priehľadnú , farba bude úplne priehľadná, t. j. 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 už inovácia css3. Predtým pri vývoji webu takýto režim neexistoval, existoval iba rgb. Určite viete, ako písať 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ý, pridáva sa len štvrtá hodnota - stupeň priehľadnosti prvku od 0 do 1. Vo všeobecnosti sa tento formát zápisu používa najmä na nastavenie polopriehľadnej farby, a nie úplne priehľadnej. 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 na pozadie už O niečo málo napísal v tomto článku, v prípade záujmu si ho môžete prečítať.

Metóda 3 - nepriehľadnosť

Ďalšia vlastnosť z technológie css3. Chcem vás ale hneď upozorniť, že to funguje trochu inak. Pri nepriehľadnosti sa priehľadnosť nastaví na celý blok, na ktorý sa aplikuje. Zhoršuje sa tak čitateľnosť textu a vnímanie obrázkov. Zmysel teda vidím v použití vlastnosti len pri blokoch, v ktorých nie je text a nejaké ďalšie informácie. Hodnoty je možné nastaviť od 0 do 1, ako v prípade štvrtého parametra pri zadávaní farby vo formáte rgba.

Vo všeobecnosti, na tento moment toto sú 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 môžete vidieť, čo je pod ním. Niekedy je to potrebné urobiť tak, že to ide dizajnovo. Vo všeobecnosti je dnes technika s presvetlením veľmi bežná.

Dúfam, že si zapamätáte a použijete niektorú z týchto troch metód pre seba. A to je z mojej strany všetko.

Vytvorenie priehľadného pozadia v HTML a CSS (nepriehľadnosť a efekty RGBA)

efekt priesvitnosti prvok je jasne viditeľný na obrázku na pozadí a rozšíril sa v rôznych operačné systémy pretože vyzerá štýlovo a krásne. Hlavnou vecou nie je mať pod priesvitnými blokmi monochromatický vzor, ale obraz, v tomto prípade sa priehľadnosť stáva viditeľnou.

Tento efekt sa dosiahne rôzne cesty, vrátane staromódnych techník, ako je použitie obrázka PNG ako pozadia, vytvorenie kockovaného obrázka a použitie vlastnosti opacity. Ale akonáhle je potrebné vytvoriť priesvitné pozadie v bloku, tieto metódy majú nepríjemné nevýhody.

Zvážte priesvitnosť textu a pozadia - ako to správne použiť pri návrhu webových stránok:

Hlavnou črtou tejto vlastnosti je, že hodnota priehľadnosti ovplyvňuje všetky podradené prvky vo vnútri, nielen pozadie. To znamená, že pozadie aj text budú priesvitné. Úroveň priehľadnosti môžete zvýšiť zmenou príkazu opacity z 0,1 na 1.

HTML 5 CSS 3 IE 9 nepriehľadnosť

Tvorba a propagácia stránok na internete

Vo webdizajne sa využíva aj čiastočná priehľadnosť a dosahuje sa prostredníctvom farebného formátu RGBA, ktorý je nastavený len pre pozadie prvku.

V dizajne by zvyčajne malo byť priesvitné iba pozadie prvku a text by mal byť nepriehľadný, aby bol čitateľný. Vlastnosť opacity sa sem nehodí, pretože text vo vnútri prvku bude tiež čiastočne priehľadný. Najlepšie je použiť formát RGBA, ktorého súčasťou je alfa kanál, alebo inak povedané hodnota priehľadnosti. Hodnota je napísaná rgba, potom hodnoty červenej, modrej a zelenej zložky farby sú uvedené v zátvorkách oddelených čiarkami. Nakoniec nasleduje priehľadnosť, ktorá sa nastavuje od 0 do 1, pričom 0 je úplne priehľadná a 1 je nepriehľadná, čo je syntax pre aplikáciu rgba.

Polopriehľadné pozadie HTML 5 CSS 3 IE 9 rgba

Tvorba a propagácia stránok na internete.

Hodnota opacity pre pozadie je nastavená na 90 % – priesvitné pozadie a nepriehľadný text.

Dnes chcem hovoriť o priehľadnom pozadí bloku textu, ako ho vyrobiť a čo na to ponúka CSS3. Predtým, ako prejdeme k rgba a hsla, pozrime sa na príklady použitia priesvitného pozadia pre blok s textom, alebo skôr, ako sa to dosiahne a aké problémy vznikajú. Na demonštráciu nám poslúži tento obrázok spracovaný nejakým java programom, na ktorý sa, žiaľ, už dávno stratil odkaz.

Pozrite sa na obrázok nižšie. Existuje grafické pozadie, na ktorom chcete prekryť priesvitný blok textom. V ideálnom prípade by to malo byť to, čo je na obrázku pod číslom 2, ale niekedy sa môže vyskytnúť aj to, čo je pod číslom 3. Je tam ešte jedna vada, ale tú spomeniem slovne trochu nižšie, pretože Neexistoval spôsob, ako to urobiť screenshotom.

Polopriehľadné pozadie bez rgba a hsla

priesvitný PNG . Najlepšia možnosť, pretože je to zďaleka najbežnejší a najjednoduchší prehliadač. Aby bol blok priehľadný, je potrebný jednopixelový priesvitný PNG, ktorý je nastavený ako pozadie bloku. A to je všetko.

Nedostatky: Vyžaduje sa iba jeden.
Transparentnosť prostredníctvom nepriehľadnosti . Priehľadnosť blokov sa v rôznych prehliadačoch nastavuje takto:
nepriehľadnosť: 0,5;
filter:alpha(opacity=50);
-moz-opacity:0,5;

kde 0,5 a 50 sú 50% transparentnosť. Ale je tu problém. Ak nastavíme blok, ktorý potrebujeme, aby mal takú priesvitnosť, tak na obrázku vyššie uvidíme tú tretiu možnosť – obsah bloku sa tiež stane priesvitným. Existuje však východisko - voľné polohovanie, pomocou ktorého sa pod blok textu umiestni ďalší blok, ktorému je nastavená priesvitnosť.

Zvážte príklad. Blok s oranžovým obrázkom nech je značka tela, kontajner, ktorý bude obsahovať text aj priehľadné pozadie - #block_bg, vnútri ktorého je blok s priesvitným pozadím #block_transparent a blok s textom - #block_text.

Textový text text, veľa, veľa textu

telo ( pozadie: url(obrázok.jpg); )
#block_bg(
poloha: relatívna;
prepad: skrytý;
šírka: 400px
výplň: 10px
}
#block_text ( pozícia: relatívna; z-index: 100; )
#block_transparent(
nepriehľadnosť: 0,5
filter: alfa(opacity=50);
-moz-opacity: 0,5;
pozadie: #fff;
pozícia: absolútna;
hore: 0;
vľavo: 0;
z-index: 90;
výška: 5000px;
šírka: 400px
}

Upozorňujem na skutočnosť, že je potrebné nastaviť šírku priehľadného bloku (riadok 19), inak sa zrúti na 1 pixel a šírku všeobecného bloku (riadok 5), inak bude text presahovať priehľadný blok (síce sa dá nastaviť šírka textu, ale zásadný rozdiel nie je). Aby sme mali odsadenie od textu a okraja priehľadného bloku, používame odsadenie v šiestom riadku. Aby bola priehľadnosť výškovo nastaviteľná, dáme jej väčšiu výšku (riadok 18) a prekrytie pre všeobecný blok (riadok 4).
Všetko sme teda napchali do jedného bloku, ktorý sa dá natlačiť do ktorejkoľvek časti stránky, kde je zaujímavé pozadie. Áno, možno budete chcieť umiestniť pozadie spoločný blok block_bg, ale je lepšie nekomplikovať si život (samozrejme v závislosti od úlohy). Inými slovami, celú túto štruktúru je lepšie šupnúť do samostatného bloku, ktorému môžete nastaviť výplň a netrpieť.
Nedostatky: Príliš objemné.

rgb a hsl, rgba a hsla sú vlastnosti CSS3

Presnejšie povedané, nie sú to celkom vlastnosti - sú nová príležitosť nastavenie farieb pre vlastnosti ako pozadie, farba, orámovanie atď.

Názov vlastností pochádza z farebných systémov RGB (Red, Green, Blue) a z HSL (Hue, Satutation, Lightness). Prvý systém popisuje farebný priestor zmiešaním základných farieb – červenej, zelenej a modrej. V druhom systéme farebné zložky zobrazujú informácie o farbe v pre ľudí známejšej forme: Čo je to za farbu? Aký je nasýtený? Aké je svetlo alebo tma?

rgb a rgba

Začnime s rgb a rgba. Hodnoty r, g, b je možné nastaviť od 0 do 255 alebo od 0 % do 100 %. Hodnota a (alfa, priehľadnosť) sa meria od 0 do 1 (zlomkové hodnoty sú špecifikované bodkou - 0,4, 0,7 atď.). Ak r, g a b dostanú hodnoty, ktoré presahujú ich povolený rozsah (napríklad 300 alebo 110 % alebo -5), zmenšia sa na najbližšiu povolenú hodnotu.

Zvážte všetko na príklade vlastnosti pozadia (hoci tí, ktorí si želajú, môžu mať farbu alebo okraj).

pozadie: rgb(0, 0, 255); /*čistá modrá*/
pozadie: rgb (100 %, 50 %, 0 %); /*čistá modrá*/
pozadie: rgb(10, 145, 500); /*bude rozpoznané ako 10, 145, 255*/
pozadie: rgba(10, 145, 255, 1); /*rovnaké ako vyššie*/
pozadie: rgba(100, 50, 255, 0,1); /*veľmi transparentný odtieň lila*/

Áno, zabudol som povedať, že nemôžete vložiť medzeru medzi vlastnosť a úvodnú zátvorku a nemôžete nastaviť niektoré hodnoty v obyčajných číslach v jednom riadku a iné ako percentá. Ak to urobíte, nič nebude fungovať.

hsl a hsla

A pár slov o hsl a hsla. Hodnota a sa nastavuje rovnakým spôsobom ako pre rgb a rgba, ale prvé tri parametre sa mierne líšia. h je nastavené od 0 do 360 a s a l sú nastavené od 0 % do 100 %.

A to najdôležitejšie. Ak je v rgb veľmi ťažké určiť farbu z hlavy (takmer vždy je to potrebné program tretej strany"pipetou"), potom stačí mať pred očami jeden obrázok, aby všetko zapadlo. Na obrázku sú odtiene parametra h.

Ak chcete odhadnúť požadovanú farbu, vyberte odtieň, potom odhadnite s, sýtosť farieb (kde 0 % predstavuje nenasýtenú farbu (odtiene šedej) a 100 % predstavuje najväčšiu sýtosť) a jej svetlosť (0 % – s ňou bude farba vždy čierna a so 100% - biela). Na základe vyššie uvedeného, obrázok ukazuje svetlé tóny pri 100% sýtosti a 50% svetlosti.

Teraz je celý farebný priestor v mojej hlave na prvý pohľad. Manuálny výber samozrejme nenahrádza kvapkadlo a nie každý potrebuje mať v hlave „farebný priestor“, ale niekedy, aby sme rýchlo prišli na to, čo treba a otestovali, to sedí.

A len par prikladov

pozadie: hsl(180, 100%, 50%); /*sýta modrá farba*/
pozadie: hsla(140, 50 %, 30 %, 0,5); /*priesvitný, sotva viditeľný odtieň zelenej*/

Nedostatky: všetky 4 vlastnosti nie sú podporované donkey a staršími prehliadačmi.

Dokončenie

Vo všeobecnosti CSS3 poskytuje ďalšiu veľmi užitočnú vec, ale ako vždy, hlavnou brzdou pokroku je IE. Pri klientskych strankach by som to zatial nepouzival (aj tak si vyberu mozog nadarmo) a bral by som opciu s PNG. A na vašej stránke – prečo nie. Najmä ak ho navštevujú vyspelí ľudia, ktorí nesedia na somároch ani žiadnych úlomkoch staroveku.

Hlavná vec je určiť obrázok v počítači alebo telefóne a potom kliknúť na tlačidlo OK v dolnej časti tejto stránky. Štandardne je obyčajné pozadie obrázka nahradené priehľadným. Farba pozadia pôvodného obrázku sa určí automaticky, stačí si v nastaveniach určiť, akou farbou ju nahradiť. Hlavným parametrom, ktorý ovplyvňuje kvalitu výmeny, 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í pevného pozadia priehľadným, bielym a zeleným:

Prvý príklad s ružovým kvetom na priehľadnom pozadí sa vyrába s nasledujúcimi nastaveniami:
1) Náhradná intenzita - 38;
2) Vyhladenie okrajov - 5;
3) Vymeňte pevné pozadie za priehľadné;
4) Orezanie (<0) или Добавление (>0) pozdĺž okrajov - "-70";
5) Invertovať – vypnuté (nezaškrtnuté políčko).

Na tvorenie druhý príklad, s bielym pozadím, boli použité rovnaké nastavenia ako v prvom príklade, okrem parametra: "Nahradiť obyčajné pozadie" - biele. IN tretí príklad, so zeleným pozadím sú tiež použité 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 pozadím alebo pozadím, ktoré určíte.

Pomerne často sa dá na internete nájsť vhodný obrázok, napríklad na vloženie na webovú stránku. Alebo možno robíte koláž a k jednému obrázku potrebujete pridať ďalšie. To je len požadované obrázky zvyčajne majú nejaký druh pozadia.

Pozrime sa, ako môžeme vytvorte priehľadné pozadie pre obrázok pomocou editoraAdobephotoshop. Nainštaloval som angličtinu Verzia Adobe Photoshop CS5, tak na ňom ukážem.

Pokúsim sa dať rôzne kombinácie klávesových skratiek.

Ak ešte nemáte nainštalovaný Photoshop, málokedy ho používate, prípadne je v angličtine, môžete si urobiť priehľadné pozadie v Paint.net. Jedná sa o jednoduchý editor obrázkov v ruskom jazyku, ktorý nezaberie veľa miesta na pevnom disku. Kliknutím na odkaz si môžete prečítať podrobný článok. Program Paint.net si môžete stiahnuť z našej webovej stránky.

Začnime jednoduchým príkladom. Predpokladajme, že máte obrázok na obyčajnom pozadí, môže to byť logo alebo názov niečoho. Urobme si toto logo alebo nápis na priehľadnom pozadí vo Photoshope.

Otvorte požadovaný obrázok v editore. Teraz urobme priehľadné pozadie pre vrstvu. V okne "Vrstvy" dvakrát kliknite na pridanú vrstvu - oproti nej bude zámok. Okno " Nová vrstva“, kliknite v ňom na „OK“. Potom zámok zmizne.

Vyberte nástroj Magic Wand. Na paneli vlastností zadajte úroveň citlivosti, nastavte rôzne hodnoty, aby ste pochopili, ako to funguje, napríklad 20 a 100. Ak chcete zrušiť výber obrázka, stlačte "Ctrl + D".

Nastavte citlivosť a stlačte čarovný prútik na oblasť pozadia. Ak chcete do vybraného pozadia pridať tie časti, ktoré nie sú vybraté, podržte stlačený kláves „Shift“ a pokračujte vo výbere. Ak chcete odstrániť vybrané oblasti, kliknite na „Odstrániť“.

Teraz namiesto pozadia Šachovnica- to znamená, že sa nám to podarilo Biele pozadie transparentný. Odstráňte výber - "Ctrl + D".

Ak máte obrázok alebo fotografiu, ktorá má veľa rôznych farieb a objektov, pozrime sa, ako urobiť priehľadné pozadie pre obrázok vo Photoshope.

V tomto prípade použijeme nástroj " Rýchly výber". Kliknite na Kúzelná palička kliknite ľavým tlačidlom myši s krátkym oneskorením a vyberte požadovaný nástroj z ponuky.

Teraz musíme vybrať objekt, ktorý chceme nechať na priehľadnom pozadí. Na paneli vlastností nastavte rôzne veľkosti a kliknite na objekt a pridajte k nemu oblasti. Ak je nepotrebné pozadie omylom zvýraznené, stlačte "Alt" a odstráňte ho.

Stlačte "Q" pre zobrazenie výsledku. Časti obrázka, ktoré sa stanú priehľadnými, budú zvýraznené ružovou farbou.

Skopírujte vybrané oblasti stlačením "Ctrl + C". Ďalej tvoríme nový súbor, "Ctrl+N", s priehľadným pozadím.

Vložte do nej skopírované fragmenty "Ctrl + V". Ak sú na nich nepotrebné časti pozadia, odstráňte ich pomocou nástroja Guma. Obrázky vytvorené na priehľadnom pozadí ukladáme do formát PNG alebo GIF.

Urobte priehľadné biele pozadie obrázka alebo vytvorte priehľadné pozadie pre jednotlivé fragmenty farebného obrázka alebo fotografie vo Photoshope. Potom ich môžete v prípade potreby použiť: prilepte ich na stránku, pridajte ich na iný obrázok alebo vytvorte zaujímavé koláže.

Priehľadnosť pozadia CSS

Transparentnosť pozadia na stránke je vytvorená pomocou vlastností CSS. Transparentnosť možno dosiahnuť dvoma spôsobmi: prostredníctvom vlastnosti opacity a background:rgba(). Pozrime sa na každý z nich a potom urobme porovnanie.

1. CSS vlastnosť opacity pre priehľadnosť pozadia

CSS má vlastnosť opacity, pomocou ktorej môžete nastaviť priehľadnosť obrázkov, textov vrátane pozadí.

Priehľadnosť sa určuje jednoducho zadaním reálneho čísla medzi 0,0 a 1,0. Čím nižšie číslo, tým menej bude objekt viditeľný.

nepriehľadnosť: 0,5 // nepriehľadnosť priesvitnosti: 0,2; // Objekt je viditeľný len pri 20% nepriehľadnosti: 0,8; // Objekt je viditeľný len na 80 %.

Pozrime sa na príklad s vlastnosťou opacity.

Text je tiež transparentný