Efekt priesvitnosti prvku je jasne viditeľný na obrázku na pozadí a rozšíril sa v rôznych oblastiach operačné systémy pretože vyzerá štýlovo a krásne. Vo webdizajne sa tiež používa a dosahuje priesvitnosť vlastnosti nepriehľadnosti alebo farebný formát RGBA, ktorý je nastavený pre pozadie.
vlastnosť nepriehľadnosti
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é a nebude fungovať na zvýšenie úrovne priehľadnosti pridaním . V tabuľke. 1 znázorňuje vzhľad textu a pozadia s rôznymi hodnotami nepriehľadnosti.
Príklad 1 ukazuje, ako vytvoriť priesvitný box pomocou nepriehľadnosti.
Príklad 1: Pozadie na webovej stránke
HTML5 CSS3 IE 9+ Cr Op Sa Fx
RGBA
Zvyčajne by podľa návrhu malo byť priesvitné iba pozadie prvku a text by mal byť nepriehľadný, aby sa zachovala jeho čitateľnosť. 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 (obr. 1), pričom 0 znamená úplnú priehľadnosť a 1 znamená nepriehľadnosť farby.
Ryža. 1. Syntax použitia rgba
Príklad 2 ukazuje použitie formátu RGBA na vytvorenie priesvitného pozadia.
Príklad 2: Polopriehľadné pozadie
HTML5 CSS3 IE 9+ Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. 2. Hodnota nepriehľadnosti pozadia je nastavená na 90 %.
Ryža. 2. Polopriehľadné pozadie a nepriehľadný text
Vytvorenie priehľadného pozadia v HTML a CSS (nepriehľadnosť a efekty RGBA)
priesvitný efekt Prvok je jasne viditeľný na obrázku na pozadí a stal sa rozšíreným v rôznych operačných systémoch, pretože vyzerá štýlovo a krásne. Hlavná vec je, že pod priesvitnými blokmi nie je monochromatický vzor, ale obraz, v tomto prípade je priehľadnosť viditeľná.
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
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
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. V aktuálnom roku 2016 sa totiž zavedenie rôznych transparentných objektov do online služieb považuje za štýlový krok.
Preto vám v tomto článku poviem o všetkom existujúce spôsoby vytváranie transparentnosti, počnúc predpotopnými riešeniami, zameriam sa na kompatibilitu riešení s prehliadačmi a tiež poskytnem konkrétne príklady programový kód. 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, v ktorých moderné riešenia nefungujú. 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 parametra css je premenná A 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.
|
poznač si to textový obsah blok 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!
Vlad Merževič
Čiastočná transparentnosť pri správnom použití vyzerá v dizajne webových stránok veľmi pôsobivo. Hlavná vec je, že pod priesvitnými blokmi by nemal byť jednofarebný vzor, ale obrázok, v tomto prípade bude priehľadnosť viditeľná. Tento efekt sa dosahuje mnohými spôsobmi, a ak si pamätáte všetko, vrátane staromódnych metód, potom je to použitie obrázka PNG ako pozadia, vytvorenie kockovaného obrázka a vlastnosť opacity. Ale akonáhle je potrebné vytvoriť priesvitné pozadie v bloku, tieto metódy majú nepríjemnú nevýhodu. Urobím krátku recenziu, aby bolo jasné, o čo ide, ako aj pre tých čitateľov, ktorí nie sú oboznámení s netradičnými možnosťami vytvorenia efektu presvetlenia.
PNG ako pozadie
AT grafický editor je predbežne pripravená jednofarebná priesvitná kresba, ktorá je uložená vo formáte PNG-24 (obr. 1). Funkciou tohto formátu je podpora 256 úrovní priehľadnosti, alebo jednoducho povedané, dokáže zobraziť priesvitné obrázky.
Ryža. 1. Obrázok na vytvorenie pozadia
Potom pridáme obrázok ako pozadie prostredníctvom vlastnosti pozadia, ako je znázornené v príklade 1.
Príklad 1: Použitie priesvitného vzoru
XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx
Výsledok tohto príkladu je znázornený na obr. 3.
Ryža. 2. Aplikácia tapety
Starší prehliadač Internet Explorer 6 nefunguje s priesvitnosťou v PNG-24, ak z nejakého dôvodu potrebujete podporovať tento prehliadač, budete musieť použiť skripty.
Predložená metóda má množstvo obmedzení. Keď teda vypnete obrázky v prehliadači, pozadie úplne zmizne. Okrem toho nie je také ľahké zmeniť farbu pozadia a hodnotu priehľadnosti, preto budete musieť obrázok znova upraviť.
kockovaný obrázok
Táto metóda patrí k starodávnym spôsobom implementácie translucencie, keď prehliadače „nemohli nič robiť“ a museli ste hľadať riešenia bez šablón. Trik spočíva vo vytvorení obrázka, ktorý strieda priehľadné a nepriehľadné pixely (obrázok 3). Takáto pravidelná štruktúra vytvára efekt priesvitnosti, v podstate ju napodobňuje.
Ryža. 3. Zväčšený kockovaný vzor
Takto to nakoniec vyzerá (obr. 4).
Ryža. 4. Imitácia priesvitnosti
Nevýhody tejto metódy sú porovnateľné s predchádzajúcou, môžu sa vyskytnúť aj moaré vzory a dochádza k degradácii textu.
vlastnosť nepriehľadnosti
Vlastnosť opacity CSS 3 nastavuje hodnotu priehľadnosti a pohybuje sa od 0 do 1, kde nula je úplná priehľadnosť prvku a jedna je naopak nepriehľadnosť. Vlastnosť opacity má vlastnosť - priehľadnosť je rozdelená na všetky podradené prvky a tie nemôžu prekročiť hodnotu priehľadnosti ich rodiča. Ukázalo sa, že na priesvitnom pozadí nemôže byť žiadny nepriehľadný text (príklad 2).
Príklad 2: Použitie nepriehľadnosti
XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx
Výsledok príkladu je znázornený na obr. 5.
Ryža. 5. Priesvitnosť textu a pozadia
V prehliadači Internet Explorer do verzie 8.0 vrátane nepriehľadnosť nefunguje, preto sa používa vlastnosť filtra špecifická pre prehliadač. Prirodzene to vedie k neplatnému kódu CSS.
RGBA
Moderný prístup je oveľa jednoduchší a vizuálnejší ako vyššie uvedené metódy a pozostáva z použitia formátu RGBA pre farbu a pozadie. Prvé tri písmená sú mnohým známe a znamenajú červenú, zelenú, modrú (červená, zelená, modrá), posledné symbolizuje alfa kanál a nastavuje priehľadnosť prvku. Formát záznamu je tento.
farba pozadia: rgba(r, g, b, a);
V zátvorkách sa namiesto písmen uvádza hodnota farebnej zložky, možno ju zobraziť v ľubovoľnom grafickom editore, posledná hodnota nastavuje priehľadnosť a zhoduje sa s hodnotou vlastnosti opacity.
Nie všetky prehliadače podporujú tento formát: Internet Explorer od verzie 9, Opera od verzie 10, Firefox od verzie 3, Safari od verzie 3.2. Ale vo všeobecnosti, moderné prehliadače správne zobraziť priehľadnosť. Pre staršie verzie IE môžete samostatne určiť farbu v jej obvyklom formáte, pričom samozrejme nebude existovať žiadna priehľadnosť. Alebo znova použite vlastnosť filter, ale potom sa musíte zmieriť s tým, že priehľadnosť ovplyvní aj text (príklad 3). Vyhovieť platný kód CSS, použil som podmienené komentáre.
Príklad 3: Použitie RGBA
HTML5 CSS3 IE Cr Op Sa Fx
Výsledok príkladu je možné vidieť na obr. 6.
Ryža. 6. Polopriehľadné pozadie s nepriehľadným textom
Porovnajte obrázok s predchádzajúcim, písmená sú jasnejšie a jasnejšie.
AT internetový prehliadač Prieskumník 7 našiel chybu pri kombinovaní farby pozadia s rôznymi hodnotami. Ak napríklad nastavíte farbu pozadia na červenú, ako je znázornené nižšie, pozadie v IE7 sa vôbec nezobrazí.
Div ( farba pozadia: červená; /* Nedá sa použiť v IE7 */ farba pozadia: rgba(255, 0, 0, 0,5); )
Toto je vyriešené nahradením vlastnosti background-color za background .
Div ( background: red; /* A funguje to */ background: rgba(255, 0, 0, 0.5); ) Je tu však jedno upozornenie. Validátor CSS „nadáva“ na pozadí, ak ho nastavíte Formát RGBA. Zároveň sa však správne vzťahuje na farbu pozadia. Vo všeobecnosti si ako vždy musíte vybrať medzi prehliadačmi a platnosťou.
Popis
Určuje farbu pozadia prvku. Hoci táto vlastnosť nededí vlastnosti svojho rodiča, pretože počiatočná hodnota je nastavená na transparentnú, 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.
AT tento príklad pre prvky webovej stránky 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.