Na vytvorenie transparentného efektu v CSS sa používa vlastnosť opacity.
IE8 a staršie verzie podporujú alternatívnu vlastnosť - filter:alpha(opacity=x) , kde "x" môže byť v rozsahu od 0 do 100 , čím nižšia je hodnota, tým transparentnejší bude prvok.
Všetky ostatné prehliadače podporujú štandardnú nepriehľadnosť vlastnosti CSS, ktorá môže mať ako hodnotu číslo od 0,0 do 1,0, čím nižšia je hodnota, tým transparentnejší bude prvok:
Skúste »Transparentnosť pri vznášaní sa
Pseudo-class:hover vám umožňuje zmeniť vzhľad prvky, keď na ne umiestnite kurzor myši. Túto funkciu použijeme na to, aby obrázok stratil svoju priehľadnosť, keď naň umiestnite kurzor myši:
Skúste »Priehľadnosť pozadia
Sú dve možné spôsoby urobiť prvok transparentným: vlastnosť nepriehľadnosti opísaná vyššie a špecifikujúca farbu pozadia vo formáte RGBA.
Model reprezentácie farieb RGB už možno poznáte. RGB (Red, Green, Blue – červená, zelená, modrá) je systém farieb, ktorý určuje odtieň zmiešaním červenej, zelenej a modrej. Ak chcete napríklad nastaviť farbu textu na žltú, môžete použiť ktorúkoľvek z nasledujúcich deklarácií:
Farba: rgb(255,255,0); farba: rgb(100%,100%,0);
Farby špecifikované pomocou RGB sa budú líšiť od hexadecimálne hodnoty, ktoré sme predtým používali v tom, že nám umožňujú používať alfa kanál transparentnosti. To znamená, že cez pozadie prvku s priehľadnosťou alfa bude viditeľné to, čo sa nachádza pod ním.
Deklarovanie farby RGBA je syntaxou podobné štandardným pravidlám RGB. Budeme však musieť deklarovať hodnotu aj ako RGBA (namiesto RGB) a zadať ďalšiu desatinnú hodnotu priehľadnosti za hodnotou farby medzi 0,0 (úplne priehľadná) a 1 (úplne nepriehľadná).
Farba: rgba(255,255,0,0,5); farba: rgba (100 %, 100 %, 0,0,5);
Rozdiel medzi vlastnosťou opacity a vlastnosťou RGBA je v tom, že vlastnosť opacity aplikuje transparentnosť na celý prvok, čo znamená, že celý obsah prvku sa stane transparentným. A RGBA vám umožňuje nastaviť priehľadnosť jednotlivých častí prvku (napríklad len textu alebo pozadia):
Telo ( obrázok na pozadí: url(img.jpg); ) .prim1 (šírka: 400px; okraj: 30px 50px; farba pozadia: #ffffff; okraj: 1px plná čierna; váha písma: tučné; nepriehľadnosť: 0,5; filter : alpha(opacity=70) /*pre IE8 a staršie*/ text-align: center .prim2 ( width: 400px; margin: 30px 50px; background-color: rgba(255,255,255,0.5); border: 1px full black; font-weight: bold text-align: center ) Skúste »
Poznámka: Hodnoty RGBA nie sú podporované v IE8 a starších verziách. Ak chcete deklarovať záložnú farbu pre staršie prehliadače, ktoré nepodporujú hodnoty farieb alfa, mali by ste ju zadať najskôr pred hodnotou RGBA: background: rgb(255,255,0); pozadie: rgba(255,255,0,0,5);
V tejto lekcii sa na to pozrieme CSS vlastnosti - nepriehľadnosť A RGBA. Nehnuteľnosť Nepriehľadnosť zodpovedá len za transparentnosť prvkov a funkciu RGBA– pre farbu a priehľadnosť, ak zadáte hodnotu priehľadnosti alfa kanála.
Priehľadnosť CSS Nepriehľadnosť
Digitálna hodnota pre nepriehľadnosť nastaviť v rozsahu od 0,0 do 1,0, kde nula je úplná priehľadnosť a jedna je naopak absolútna nepriehľadnosť. Napríklad, ak chcete vidieť 50% priehľadnosť, musíte nastaviť hodnotu na 0,5. To treba mať na pamäti nepriehľadnosť sa šíri do všetkých podradených prvkov rodiča. To znamená, že text na priesvitnom pozadí bude tiež priesvitný. A toto je už veľmi významná nevýhoda, text tiež nevyniká.
Transparentnosť prostredníctvom CSS Opacity
Snímka obrazovky jasne ukazuje, že čierny text sa stal rovnako priesvitným ako modré pozadie.
Div(
pozadie: url(obrázky/váš obrázok.jpg); /* Obrázok na pozadí */
šírka: 750px;
výška: 100px;
okraj: auto;
}
.modrá(
pozadie: #027av4; /* Priesvitná farba pozadia */
nepriehľadnosť: 0,3; /* Hodnota priesvitnosti pozadia */
výška: 70px;
}
h1 (
výplň: 6px;
rodina písiem: Arial Black;
font-weight: tučnejšie;
veľkosť písma: 50px;
}
Transparentnosť CSS vo formáte RGBA
Formát pre záznam farby RGBA, je modernejšou alternatívou nehnuteľnosti nepriehľadnosť. R (červená), G (zelená), B (modrá)- znamená: červená, zelená, modrá. Posledný list A– znamená alfa kanál, ktorý nastavuje transparentnosť. RGBA na rozdiel od Nepriehľadnosť neovplyvňuje podradené prvky.
Teraz sa pozrime na náš príklad použitia RGBA. Nahraďte tieto riadky v štýloch.
Pozadie: ##027av4; /* Farba pozadia */
nepriehľadnosť: 0,3; /* hodnota priesvitnosti pozadia */
na ďalší riadok
Pozadie: rgba(2, 127, 212, 0,3);
Ako vidíte, hodnota priehľadnosti 0,3 je pre obe metódy rovnaká.
Výsledok príkladu RGBA:
Druhá snímka obrazovky vyzerá oveľa lepšie ako prvá.
Pohrávaním sa s priesvitnosťou pozadia blokov môžete na svojom webe dosiahnuť zaujímavé efekty. Je dôležité, aby tieto priesvitné bloky išli na vrchol farebného dizajnu, ako je napríklad fotografia. Iba v tomto prípade bude účinok viditeľný. Táto technika sa už dlho používa v dizajne, ešte pred príchodom akéhokoľvek CSS3, bola implementovaná čisto v grafických programoch.
Ak zákazník požaduje, aby rozloženie vyzeralo dobre v starších verziách prehliadača Internet Explorer a potom pridajte vlastnosť filter a nezabudnite to okomentovať, aby to neovplyvnilo platnosť kódu.
Záver
Formátovať RGBA podporujú všetky moderné prehliadače okrem Internet Explorer. To je tiež veľmi dôležité RGBA flexibilný, pôsobí len na konkrétny špecifikovaný prvok, bez toho, aby ovplyvňoval jeho deti. Je jasné, že pre dizajnéra rozloženia je to pohodlnejšie. Moja voľba je jednoznačne v prospech formátu RGBA prijímať transparentnosť v CSS.
Pre lepšiu konsolidáciu materiálu a väčšiu prehľadnosť navrhujem prejsť.
Ahojte všetci. 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. CSS3 tiež zaviedlo možnosť vytvárať lineárne a radiálne gradienty, ale to je téma na iný článok. V tomto som vám chcel povedať, ako nastaviť priehľadnosť pre vlastnosť pozadia v CSS.
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ých editorov, tak to asi vieš farebný režim rgb znamená: podiel červenej (červenej), 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 pozadie bloku priesvitné a 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 náročné. 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.
Transparentnosť CSS – riešenie pre viaceré prehliadače - 3,8 z 5 na základe 6 hlasov
V tejto lekcii sa pozrieme na transparentnosť CSS, naučíme sa, ako dať transparentnosť rôznym prvkom stránky a dosiahnuť úplnú kompatibilitu medzi prehliadačmi, t. j. tento efekt bude fungovať rovnako v rôznych prehliadačoch.
Ako nastaviť priehľadnosť ľubovoľného prvku
V CSS3 je vlastnosť opacity zodpovedná za vytváranie transparentných prvkov, ktoré je možné použiť na akýkoľvek prvok. Táto vlastnosť má hodnoty od 0 do 1, ktoré určujú stupeň priehľadnosti. Kde 0 je úplná priehľadnosť (predvolená hodnota pre všetky prvky) a 1 je úplná nepriehľadnosť. Hodnoty sú zapísané ako zlomky: 0,1, 0,2, 0,3 atď.
Príklad použitia:
Transparentnosť medzi prehliadačmi
Nie všetky prehliadače vnímajú a implementujú vyššie uvedenú vlastnosť nepriehľadnosti rovnakým spôsobom. V niektorých prípadoch je potrebné použiť iný názov vlastnosti alebo filtre.
Nasledujúce zobrazenia podporujú vlastnosť nepriehľadnosti CSS3 Prehliadače Mozilla 1.7+, Firefox 0.9+, Safari 1.2+, Opera 9+.
Tak dobre :) prehliadač ako Internet Explorer do verzie 9.0 nepodporuje vlastnosť opacity a na vytvorenie priehľadnosti pre tento prehliadač je potrebné použiť vlastnosť filter a hodnotu alpha(Opacity=X), v ktorej X je celé číslo v rozsah od 0 do 100, ktorý určuje úroveň transparentnosti. 0 je úplne priehľadná a 100 je úplne nepriehľadná.
Čo sa týka prehliadač Firefox pred verziou 3.5 podporuje vlastnosť -moz-opacity namiesto opacity.
Prehliadače ako Safari 1.1 a Konqueror 3.1, postavené na jadre KHTML, používajú na ovládanie transparentnosti vlastnosť -khtml-opacity.
Ako môžete nastaviť priehľadnosť v CSS tak, aby vyzerala rovnako vo všetkých prehliadačoch? Ak chcete vytvoriť riešenie pre priehľadnosť prvkov naprieč prehliadačmi, musia zadať nielen jednu vlastnosť nepriehľadnosti, ale aj nasledujúcu množinu vlastností:
filter: alpha(Nepriehľadnosť=50); /* Priehľadnosť pre IE */ -moz-opacity: 0,5; /* Podporuje Mozillu 3.5 a nižšie */ -khtml-opacity: 0.5; /* Podporuje Konqueror 3.1 a Safari 1.1 */ nepriehľadnosť: 0,5; /* Podporuje všetky ostatné prehliadače */
Transparentnosť rôznych prvkov
Pozrime sa na niekoľko príkladov nastavenia transparentnosti pre určité prvky, ktoré sa na stránke používajú najčastejšie.
Priehľadnosť obrázkov CSS.
Pozrime sa na niekoľko možností na vytvorenie priesvitného obrázka. V nasledujúcom príklade prvý obrázok nemá nastavenú priehľadnosť, druhý má priehľadnosť 50 % a tretí má 30 %.
výsledok:
Transparentnosť v CSS pri umiestnení kurzora myši nad obrázok.
Často je potrebné sprehľadniť obrázok alebo akýkoľvek iný prvok v momente, keď sa nad ním pohybuje kurzor. Môžete to urobiť pomocou CSS pseudo-class:hover. Aby ste to dosiahli, nášmu obrázku je potrebné priradiť dve triedy, jednu normálnu - toto bude neaktívny stav obrázka a druhú triedu s pseudotriedou: vznášajte sa, tu musíte momentálne určiť priehľadnosť obrázka podržaním kurzora.
Výsledok si môžete pozrieť v ukážke.
Priehľadnosť pozadia pomocou CSS.
Tu je potrebné pripomenúť, že priehľadnosť sa vzťahuje na všetky vnorené prvky a nemôžu mať väčšiu priehľadnosť ako vnorený prvok.
Ako príklad uvedieme variant s pozadím stránky vytvoreným pomocou obrázka a blok s pozadím vytvoreným pomocou farby a s priehľadnosťou 50 %.
Príklad kódu:
Tu je výsledok vyššie uvedeného kódu:
Ahojte všetci. Dnes vám poviem, ako nastaviť transparentnú 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 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. Ale chcem vás 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 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, na momentálne 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 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á.
Dúfam, že si zapamätáte a použijete jednu z týchto troch metód pre seba. A to je z mojej strany všetko.