Dobrý deň, milovníci vývoja webu, ako aj nováčikovia. Pre tých, ktorí nesledujú trendy v IT oblasti, či skôr webovej módy, chcem slávnostne oznámiť, že táto publikácia je na tému: „Ako urobiť transparentný css blok nástroje“ práve včas pre vás. Skutočne, v aktuálnom roku 2016, zavedenie rôznych online služieb do priehľadné predmety považovaný za štýlový ťah.
Preto vám v tomto článku poviem o všetkom existujúce metódy vytváranie transparentnosti, počnúc predpotopnými riešeniami, zameriam sa na kompatibilitu riešení s prehliadačmi, ako aj uvediem konkrétne príklady programového kódu. A teraz do práce!
Metóda 1. Predpotopná
Kedy tam boli slabé počítače a „schopnosť“ nie je vyvinutá, vývojári prišli na vlastný spôsob vytvorenia priehľadného pozadia: použitie priehľadných pixelov striedavo s farebnými. Takto vytvorený blok vyzeral pri zmenšení ako šachovnica, no v bežnej veľkosti pripomínal nejakú priehľadnosť.
Táto, podľa mňa, „barlička“ samozrejme pomáha v starších verziách prehliadačov, ktoré nefungujú moderné riešenia. Za zmienku však stojí kvalita zobrazenia textu , zapísaný v takom , prudko klesá.
Metóda 2. Nie je zmätená
V ojedinelých prípadoch riešia vývojári problém so zavedením priesvitného obrázku vložením ... už hotového priesvitného obrázku! Na tento účel sa používajú obrázky uložené vo formáte PNG-24. Tento grafický formát umožňuje nastaviť 256 úrovní priesvitnosti.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
|
Táto metóda však nie je vhodná z niekoľkých dôvodov:
- internet Explorer 6 s touto technológiou nefunguje, musíte pre ňu napísať kód skriptu;
- V css nemôžete zmeniť farby pozadia;
- Ak je funkcia zobrazovania obrázkov v prehliadači zakázaná, zmizne.
Spôsob 3. Propagovaný
Najbežnejším a najznámejším spôsobom, ako urobiť blok transparentným, je vlastnosť nepriehľadnosť.
Hodnota parametra sa pohybuje v rozsahu , kde pri 0 je objekt neviditeľný a pri 1 je plne zobrazený. Je tu však niekoľko nepríjemných momentov.
Po prvé, všetky podradené prvky zdedia transparentnosť. A to znamená, že vpísaný text bude „presvitať“ spolu s pozadím.
Po druhé, Internet Explorer opäť „ohŕňa nos“ a až do verzie 8 s ním nefunguje nepriehľadnosť.
Ak chcete vyriešiť tento problém, použite filter:alfa (Nepriehľadnosť=hodnota).
Zvážte príklad.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
Metóda 4. Moderná
Dnes profesionáli používajú nástroj rgba (r, g, b, a).
Predtým som povedal, že RGB je jedným z obľúbených farebných modelov, kde R má na svedomí všetky odtiene červenej, G – odtiene zelenej a B – odtiene modrej.
V prípade css parameter premenná A je zodpovedná za alfa kanál, ktorý je zase zodpovedný za transparentnosť.
Hlavná výhoda posledný spôsob- alfa kanál neovplyvňuje objekty vo vnútri štylizovaného rámčeka.
rgba (r, g, b, a) je podporovaný, pretože:
- 10 verzií Opery;
- Internet Explorer 9;
- Safari 3.2;
- 3 verzie Firefoxu.
Chcem poznamenať zaujímavý fakt! Milovaný Internet Explorer 7 vyhodí chybu pri kombinovaní vlastnosti farba pozadia s názvom farieb (farba pozadia: zlatá). Preto by ste mali používať iba:
farba pozadia: rgba(255, 215, 0, 0,15)
A teraz príklad.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
V našej predajni nájdete všetky druhy kvetov.
|
Upozorňujeme, že textový obsah bloku je plne viditeľný (100 % čierny), zatiaľ čo pozadie je nastavené na alfa kanál 0,88, t.j. 88 %.
Tento príspevok sa skončil. Prihláste sa na odber môjho blogu a nezabudnite pozvať svojich priateľov. Veľa šťastia pri učení webových jazykov! Čau Čau!
Popis
Určuje farbu pozadia prvku. Táto vlastnosť síce nededí vlastnosti od svojho rodiča, a to z dôvodu, že pôvodná hodnota nastavená na priehľadnú farbu pozadia detské prvky zodpovedá farbe pozadia nadradeného prvku.
Syntax
farba pozadia:<цвет>| transparentný | dediť
hodnoty
transparentné Nastaví priehľadné pozadie. zdediť Zdedí hodnotu rodiča.HTML5 CSS2.1 IE Cr Op Sa Fx
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
V tomto príklade prvky webovej stránky používajú tri rôznymi spôsobmi nastavenia farby pozadia. Výsledok príkladu je znázornený na obr. jeden.
Ryža. 1. Použite farbu pozadia
Objektový model
document.getElementById("elementID ").style.backgroundColor
Prehliadače
Internet Explorer do verzie 7.0 nepodporuje zdediť hodnotu.
priama transparentnosť obrázok na pozadí(aspoň pre rok 2016) nemôžete nainštalovať cez CSS (vrátane CSS 3). Existuje mnoho riešení tohto problému.
Miešanie pozadí
najviac jednoduché riešenie mieša dve pozadia (obrázok a priesvitnú farbu). Tento spôsob je vhodný, ak sa pod "priehľadným obrázkom pozadia" nachádza pozadie rovnakého typu. nejde vôbec o priehľadnosť, ale o jej imitáciu zmiešaním obrazu s farbou. Nastavte dvojité pozadie pozostávajúce z obrázka na pozadí a požadovanej farby s alfa kanálom. Potom vyberte najvhodnejší režim prelínania a pomocou alfa kanála farby upravte kompozíciu na požadovaný výsledok.
Pozadie: url("/images/img1.jpg"), rgba(255,255,255,0,9); režim prelínania pozadia: farba;
Pridanie pseudo prvku
Najlepší spôsob, ako získať to, čo chcete. Pseudoprvok vytvoríme pomocou pseudotriedy after. Dostupné
#main ( position: relativní; ) #main:after ( content: ""; display: block; position: absolute; top: 0; left: 0; background-image: url(/wp-content/uploads/2010/11 /tandem.jpg); šírka: 100 %; výška: 100 %; nepriehľadnosť: 0,2; z-index: -1; )
Ahojte všetci. Ako možno viete, pozadie je vlastnosť CSS, ktorá vám umožňuje nastaviť farbu pozadia alebo nahrať obrázok, ktorý bude slúžiť ako pozadie. CSS3 tiež predstavilo možnosť vytvárať lineárne a radiálne gradienty, ale toto je téma na samostatný článok. V tom istom som vám chcel povedať, ako nastaviť priehľadnosť pre vlastnosť pozadia v css.
Nastavte priehľadnosť pre pozadie CSS
To všetko sa robí veľmi jednoducho vďaka takému formátu farebného zápisu, ako je rgba. Ak pracujete s grafickými editormi, pravdepodobne viete, že farebný režim rgb sa dekóduje nasledovne: podiel červenej (červená), podiel zelenej (zelená) a modrej (modrá). Takže rgba je takmer 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 uvádzame, ž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 sa zapisuje 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 prvok ako celok. To znamená, že pri použití nepriehľadnosti možno na text použiť aj priehľadnosť, čím sa stane nečitateľným.
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:
A teraz nastavme bloku rovnakú čiernu farbu, ale špecifikujte 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 je cez neho viditeľný obrázok na pozadí. Tento obrázok a pozadie sú len ilustračné. Ako ste pochopili, v css pozadie priehľadnosť sa môže hodiť, keď chcete, aby pozadie vnoreného prvku presvitalo bez zakrytia ostatných pozadí v iných vrstvách.
Samotnú farbu nie je ťažké nastaviť pomocou rgba. 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ť veľa krásnych efektov pre stránku.
CSS používa vlastnosť opacity na vytvorenie transparentného efektu.
IE8 a staršie verzie podporujú alternatívnu vlastnosť - filter:alpha(opacity=x), kde "x" môže nadobúdať hodnotu od 0 do 100 , čím menšia hodnota, tým transparentnejší bude prvok.
Všetky ostatné prehliadače štandard podporujú Vlastnosť CSS nepriehľadnosť , ktorá môže mať ako hodnotu číslo od 0,0 do 1,0 , čím menšia hodnota, tým transparentnejší bude prvok:
Skúste »Priehľadnosť po umiestnení kurzora myši
Pseudo-class:hover vám umožňuje zmeniť vzhľad prvky, keď na ne umiestnite kurzor myši. Túto funkciu použijeme, aby obrázok stratil svoju priehľadnosť pri umiestnení kurzora myši:
Skúste »Priehľadnosť pozadia
Existujú dva možné spôsoby urobte prvok transparentným: vlastnosť opacity opísaná vyššie a farba pozadia vo formáte RGBA.
Model reprezentácie farieb RGB už možno poznáte. RGB (Red, Green, Blue - červená, zelená, modrá) - farebný systém, 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 doteraz používali v tom, že nám umožňujú používať alfa kanál transparentnosti. To znamená, že to, čo je pod, sa zobrazí cez pozadie prvku s priehľadnosťou alfa.
Deklarácia farieb RGBA je syntaxou podobná štandardným pravidlám RGB. Okrem iného však musíme deklarovať hodnotu ako RGBA (namiesto RGB) a nastaviť ďalšiu desatinnú hodnotu priehľadnosti po hodnote 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 RGBA je v tom, že vlastnosť opacity aplikuje transparentnosť na celý prvok, t. j. celý obsah prvku sa stane transparentným. A RGBA umožňuje nastaviť priehľadnosť oddelené časti prvok (napríklad iba text alebo pozadie):
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ší*/ text-align: center; ) .prim2 (šírka: 400px; okraj: 30px 50px; farba pozadia: rgba(255,255,255,0,5); rám: 1px plný čierna; hrúbka písma: tučné; zarovnanie textu: na stred; ) Skúste »
Poznámka: Hodnoty RGBA nie sú podporované v IE8 a novších verziách skoré verzie. Ak chcete deklarovať záložnú farbu pre staršie prehliadače, ktoré nepodporujú hodnoty farieb s alfa kanálmi, zadajte ju najskôr pred hodnotou RGBA: background: rgb(255,255,0); pozadie: rgba(255,255,0,0,5);
