transparentný css. Priehľadnosť pozadia CSS. Priehľadné pozadie alebo text s CSS. Použitie obrázka PNG

Ahoj. 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ž zaviedlo 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 záznamu farieb, akým je rgba. Ak pracujete s grafickými editormi, tak asi 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ť priehľadnosť pre vlastnosť pozadia 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ť 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 viete, priehľadnosť pozadia v css sa môže hodiť, keď potrebujete, aby pozadie vnoreného prvku presvitalo bez zakrytia iných pozadí umiestnených 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.

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 tento príklad znázornené na obr. 3.

Ryža. 2. Aplikácia tapety

Zastaraný 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. päť.

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). Na vynútenie platného kódu CSS som použil 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 RGBA formát. 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.

S príchodom CSS3 sa práca dizajnérov rozloženia stala oveľa jednoduchšou a logickejšou: koniec koncov, teraz môžete skutočne flexibilne konfigurovať akýkoľvek objekt a čoraz menej sa uchyľovať k JavaScriptu. Povedzme, že potrebujete upraviť priehľadnosť pozadia – CSS ponúka hneď niekoľko možností.

Pozadie je určené množinou atribútov , background-repeat, background-attachment, background-origin, background-clip, background-color), pričom každý z nich môže byť špecifikovaný samostatne alebo kombinovaný pod atribútom background. Poďme analyzovať každý z nich podrobnejšie.

atribút farby pozadia

Dokonca aj IE8 podporuje túto metódu. V tekutom rozložení sa používa niekoľko obrázkov ako pozadie. Najdôležitejšie je, že pri použití akéhokoľvek obrázka si v CSS nastavte aj farbu pozadia, pretože sa používateľom môže stať, že obrázok jednoducho nenačítajú.

atribút background-position

Ak na nastavenie pozadia bloku použijete obrázok, CSS vám umožní umiestniť obrázok kdekoľvek na obrazovke. Štandardne je obrázok umiestnený v ľavom hornom rohu. Atribút akceptuje buď verbálne údaje (hore, dole, vľavo, vpravo) alebo číselné údaje (percentá, pixely a iné merné jednotky). V tomto prípade musíte zadať dve hodnoty: horizontálne a vertikálne:

telo (pozícia na pozadí: pravý stred;) - v tomto príklade bude pozadie umiestnené na pravej strane stránky a dolná a horná vzdialenosť k obrázku sú rovnaké.

atribút veľkosti pozadia

Niekedy sa vyžaduje s pomocou CSS roztiahnite pozadie alebo zmenšite jeho veľkosť. Ak to chcete urobiť, použite atribút veľkosť pozadia a veľkosť pozadia sa dá nastaviť v pixeloch alebo percentách a v akýchkoľvek iných merných jednotkách.

S týmto atribútom sú určité problémy: na správne zobrazenie pozadia v starších verziách prehliadačov je potrebné použiť predpony. Samozrejme, aktuálne verzie plne podporujú tento atribút a nie sú potrebné špecifické vlastnosti.

atribút background-attachment

Tento atribút určuje správanie obrázka na pozadí pri posúvaní. Môže teda nadobudnúť 3 hodnoty (neberúc do úvahy dedičstvo, ktoré je spoločné pre všetky atribúty uvedené v tomto článku):

• pevné- znehybní obraz na pozadí;
• rolovať- pozadie sa posúva spolu so zvyškom prvkov;
• miestne- obrázok na pozadí sa posúva, ak má obsah rolovanie. Pozadie, ktoré presahuje obsah, je opravené.

Príklad použitia:

telo (pevné upevnenie pozadia).

Firefox momentálne nepodporuje poslednú vlastnosť (lokálnu).

atribút pôvodu pozadia

Tento atribút je zodpovedný za umiestnenie prvku. Prvé prehliadače vyžadujú použitie predpôn. Samotná nehnuteľnosť má tri parametre:

• vypchávkový box umiestni pozadie vzhľadom na okraj, pričom zohľadní hrúbku rámu;
• border-box sa líši od predchádzajúcej vlastnosti tým, že hraničná čiara môže úplne alebo čiastočne prekrývať pozadie;
• obsah box umiestni obrázok a ukotví ho k obsahu.

Ak je zadaných viacero hodnôt, prehliadače môžu reagovať odlišne: Firefox a Opera akceptujú iba prvú možnosť.

atribút background-repeat

Vo všeobecnosti, ak je pozadie nastavené na obrázok, malo by sa opakovať horizontálne alebo vertikálne. Na to slúži atribút background-repeat. Napríklad pozadie bloku, ktorého CSS obsahuje takúto vlastnosť, môže mať jednu z niekoľkých možností:

• bez opakovania- obrázok sa zobrazí na stránke v jedinej verzii;
• opakovať- pozadie sa opakuje pozdĺž osí x a y;
• opakujte x- iba horizontálne;
• opakovať-y- iba vertikálne;
• priestor- pozadie sa opakuje, ale ak sa priestor nedá vyplniť, medzi obrázkami sa objavia medzery;
• okrúhly- obrázok sa zmení, ak nie je možné vyplniť celú plochu celými obrázkami.

Príklad použitia atribútu:

telo (opakovanie na pozadí: opakovanie bez opakovania)- podobne background-repeat: repeat-y.

V CSS3 je možné nastaviť hodnoty pre viacero obrázkov uvedením možností oddelených čiarkami.

atribút klipu pozadia

Tento atribút definuje správanie pozadia pod okrajmi (napríklad v prípade prerušovaných okrajov):

• vypchávkový box- pozadie je zobrazené striktne vo vnútri bloku;
• border-box- obraz ide pod rám;
• obsah box— obrázok na pozadí sa zobrazí iba vo vnútri obsahu.

Príklad použitia:

telo (background-clip: content-box;).

Chrom a Safari vyžadujú použitie predpony -webkit-.

atribúty nepriehľadnosti a filtra

Atribút opacity umožňuje nastaviť priehľadnosť pozadia – vlastnosť CSS bude fungovať vo všetkých prehliadačoch. Hodnota je nastavená medzi 0,0 a 1,0 vrátane. V tomto prípade môžete nastaviť priehľadnosť pozadia CSS bez celočíselnej hodnoty: namiesto 0,3 stačí napísať .3:

.blok (obrázok na pozadí: url(img.png); nepriehľadnosť: .3;).

Pre nastavenie priehľadnosti pozadia, ktorého CSS je vhodné aj pre IE pod deviatou verziou, použite atribút filter:

.block (obrázok na pozadí: url(img.png); filter: alpha(opacity=30);).

V tomto prípade je hodnota opacity nastavená v rozsahu od 0 do 100. Všimnite si, že atribút opacity sa líši od nastavenia priehľadnosti pomocou RGBA dedičnosťou: pri použití opacity sa stane priehľadným nielen pozadie, ale aj všetky prvky vo vnútri bloku. .

Vždy sledujte štatistiky používania prehliadača pre SNŠ a všetky ostatné krajiny. Najväčším problémom pre všetkých dizajnérov rozloženia sú staré verzie IE, neumožňujú vám naplno využívať CSS3. Pri rozložení nezabudnite použiť špeciálne služby, ktorá kontroluje, či váš prehliadač nejaký podporuje vlastnosť css. Ak nemôžete nainštalovať staršie verzie prehliadačov, nájdite službu, ktorá stránku skontroluje rôzne prehliadače online.

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í.

Nastavenie priehľadnosti sa nastavuje jednoducho zadaním Reálne číslo od 0,0 do 1,0. Čím nižšie číslo, tým menej bude objekt viditeľný.

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

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

Текст также прозрачный

Этот код преобразуется на странице в следующее:

Текст также прозрачный

2. Прозрачность через свойство CSS background:rgba()

Вторым вариантом задания прозрачности фона на сайте является свойство CSS background:rgba. Рассмотрим пример

Текст также прозрачный

Этот код преобразуется на странице в следующее.

Свойство CSS RGBa позволяет задать фоновый цвет с альфа-каналом (т.е. заливать блоки полупрозрачным цветом).

Разумеется, в CSS есть свойство opacity, однако основной его недостаток: все дочерние элементы внутри прозрачного блока будут также наследовать его прозрачность.

Чаще всего используют заливку фона элемента одно-пиксельным PNG24 и фиксят прозрачность в IE6, или ещё фон делают прозрачным через css opacity. Текст позиционируют отдельно уже в другом элементе, но это, на мой взгляд, не совсем удобно…

С помощью RGBa решение выглядит следующим образом:

1. Допустим, нам нужен синий фон с прозрачностью 50%.

А не поддерживать его будут IE6–8, Opera 9.x, Mozilla Firefox 2.x

2. Для IE можно постараться и сделать более изящно:

Примечание: Цвет в фильтре задается 8 числами. Первые 2 числа это степень прозрачности: FF - полностью непрозрачный, 00 - прозрачный. Следующие 6 чисел привычное обозначение HTML-цвета.

Использование RGBa не ограничивается только фоновым цветом у блоков…