Transparentni css. Preglednost ozadja CSS. Prozorno ozadje ali besedilo z uporabo CSS. Uporaba slik PNG

Pozdravljeni vsi skupaj. Kot morda veste, je ozadje lastnost CSS, ki vam omogoča, da nastavite barvo ozadja ali naložite sliko, ki bo delovala kot ozadje. CSS3 je predstavil tudi možnost ustvarjanja linearnih in radialnih gradientov, vendar je to tema za drug članek. V tem sem vam želel povedati, kako nastaviti prosojnost za lastnost ozadja v CSS.

Nastavite prosojnost za ozadje css

Torej, vse to je narejeno zelo preprosto zahvaljujoč formatu barvnega zapisa, kot je rgba. Če delate z grafičnimi urejevalniki, potem verjetno veste, da barvni način rgb pomeni: delež rdeče (rdeča), delež zelene (zelene) in modre (modre). Torej, rgba je praktično enaka, le še en parameter je dodan - preglednost. Napisano je takole:

Barva ozadja: rgba(173, 57, 22, 0,5)

Najprej izrecno označimo, da nastavljamo barvo v načinu rgba. Nato navedemo vrednosti nasičenosti treh osnovnih barv od 0 do 255, kjer je 255 največja nasičenost. Četrti parameter je naša transparentnost. Tukaj je zapisana vrednost od 0 do ena. 1 je popolnoma neprosojen element, 0 pa popolnoma prosojen element. V skladu s tem, če ga nastavite na 0, barva ozadja sploh ne bo vidna.

Zdaj veste, kako nastaviti lastnost ozadja na prosojnost v CSS. Če želite to narediti, morate uporabiti barvni način rgba. Obstaja tudi lastnost motnosti, ki pa velja za celoten element kot celoto. To pomeni, da se lahko pri uporabi motnosti na besedilo uporabi prosojnost, zaradi česar je neberljivo.

Primer prozornega ozadja

Prednosti prosojnega ozadja je enostavno prikazati s primerom. Na primer, imamo splošno ozadje strani. Tako bi izgledal blok, če bi bil obarvan v enobarvni črni barvi:

Zdaj bloku nastavimo isto črno barvo, vendar jo določimo z barvnim formatom rgba, pri čemer zadnjo vrednost določimo na primer kot 0,7. Izkazalo se bo takole:
Zdaj je skozi njega vidno ozadje bloka in skozi njega je vidna slika ozadja. Ta slika in ozadje sta samo za primer. Kot si lahko predstavljate, je prosojnost ozadja v css lahko uporabna, ko želite, da se prikaže ozadje ugnezdenega elementa, ne da bi zakrili druga ozadja, ki se nahajajo na drugih slojih.

Sama nastavitev barve z rgba ni težavna. Kot že rečeno, prve tri črke pomenijo tri osnovne barve: rdečo, zeleno in modro oziroma njihov delež (od 0 do 255). Z nastavitvijo različnih vrednosti lahko dobite na milijone različnih barv, prosojnost pa vam bo omogočila, da po potrebi ustvarite veliko lepše učinke za spletno mesto.

Vlad Merževič

Delna preglednost, če je pravilno uporabljena, izgleda zelo impresivno v oblikovanju spletne strani. Glavna stvar je, da pod prosojnimi bloki ni monokromatskega dizajna, ampak slika, v tem primeru postane opazna prosojnost. Ta učinek se doseže na več načinov in če se spomnite vseh, vključno s staromodnimi metodami, je uporaba slike PNG kot ozadja, ustvarjanje kariraste slike in lastnost motnosti. Toda takoj, ko se pojavi potreba po izdelavi prosojnega ozadja v bloku, imajo te metode neprijetno pomanjkljivost. Naredil bom kratek pregled, da bo jasno, o čem govorimo, pa tudi za tiste bralce, ki ne poznajo netradicionalnih možnosti za ustvarjanje prosojnega učinka.

PNG kot ozadje

IN grafični urejevalnik Enobarvni prosojni vzorec je vnaprej pripravljen in shranjen v formatu PNG-24 (slika 1). Posebnost tega formata je, da podpira 256 stopenj prosojnosti ali preprosto povedano, lahko prikazuje prosojne slike.

riž. 1. Slika za ustvarjanje ozadja

Nato dodamo sliko kot ozadje prek lastnosti ozadja, kot je prikazano v 1. primeru.

Primer 1: Uporaba prosojnega vzorca

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Rezultat ta primer prikazano na sl. 3.

riž. 2. Uporaba slike za ozadje

Zastarel brskalnik internet Explorer 6 ne deluje s prosojnostjo v PNG-24, če morate iz nekega razloga podpirati ta brskalnik, boste morali uporabiti skripte zanj.

Zgornja metoda ima številne omejitve. Torej, ko onemogočite slike v brskalniku, bo ozadje popolnoma izginilo. Poleg tega ni tako enostavno spremeniti barve ozadja in vrednosti prosojnosti, zato boste morali znova urediti sliko.

Karirasta slika

Ta metoda se nanaša na povsem starodavne metode izvajanja prosojnosti, ko brskalniki "ničesar niso mogli storiti" in je bilo treba iskati nestandardne rešitve. Trik je v tem, da ustvarite sliko, ki izmenjuje prozorne in neprozorne slikovne pike (slika 3). Ta pravilna struktura ustvarja prosojen učinek, ki ga v bistvu posnema.

riž. 3. Povečan karo vzorec

Takole izgleda na koncu (slika 4).

riž. 4. Simulirajte prosojnost

Slabosti te metode so primerljive s prejšnjo; lahko se pojavi tudi moiré vzorec in besedilo se pokvari.

Lastnost motnosti

Lastnost motnosti CSS 3 določa vrednost motnosti in se giblje od 0 do 1, kjer je nič popolna prosojnost elementa, ena pa je, nasprotno, neprozorna. Lastnost motnosti ima posebnost - prosojnost velja za vse podrejene elemente in ti ne morejo preseči vrednosti motnosti svojega starša. Izkazalo se je, da na prosojnem ozadju ne more biti neprozornega besedila (2. primer).

2. primer: uporaba motnosti

XHTML 1.0 CSS 2.1 CSS 3 IE Cr Op Sa Fx

Rezultat primera je prikazan na sl. 5.

riž. 5. Prosojnost besedila in ozadja

V različicah Internet Explorerja do vključno 8.0 motnost ne deluje, zato uporablja lastnost filtra, specifično za brskalnik. Seveda to povzroči neveljavno kodo CSS.

RGBA

Sodoben pristop je veliko enostavnejši in bolj vizualen od zgornjih metod in vključuje uporabo formata RGBA za barve in ozadja. Prve tri črke so znane mnogim in pomenijo rdečo, zeleno, modro (rdeča, zelena, modra), zadnja simbolizira alfa kanal in določa prosojnost elementa. Format snemanja je naslednji.

barva ozadja: rgba(r, g, b, a);

V oklepajih je namesto črk navedena vrednost barvne komponente, ki jo je mogoče videti v katerem koli grafičnem urejevalniku; zadnja vrednost določa prosojnost in sovpada z vrednostjo lastnosti motnosti.

Vsi brskalniki ne podpirajo tega formata: Internet Explorer od različice 9, Opera od različice 10, Firefox od 3, Safari od 3.2. Toda na splošno, sodobni brskalniki pravilno prikazati prosojnost. Za starejše različice IE lahko ločeno določite barvo v običajnem formatu in seveda ne bo prosojnosti. Ali pa znova uporabite lastnost filtra, vendar se boste potem morali sprijazniti z dejstvom, da bo prosojnost vplivala tudi na besedilo (primer 3). Za ohranitev veljavne kode CSS sem uporabil pogojne komentarje.

Primer 3: Uporaba RGBA

HTML5 CSS3 IE Cr Op Sa Fx

Rezultat primera je viden na sl. 6.

riž. 6. Prosojno ozadje z neprozornim besedilom

Primerjajte sliko s prejšnjo, črke so postale svetlejše in jasnejše.

IN internetni brskalnik Explorer 7 je odkril napako pri kombiniranju barve ozadja z različnimi vrednostmi. Če na primer nastavite barvo ozadja na rdečo, kot je prikazano spodaj, se ozadje v IE7 sploh ne bo pojavilo.

Div (barva ozadja: rdeča; /* Ni uporabno v IE7 */ barva ozadja: rgba(255, 0, 0, 0.5); )

To se reši z zamenjavo lastnosti barve ozadja z ozadjem.

Div ( ozadje: rdeče; /* In to deluje */ ozadje: rgba(255, 0, 0, 0.5); ) Vendar obstaja eno opozorilo. Preverjevalnik CSS se pritožuje zaradi ozadja, ko dobi vrednost v formatu RGBA. Toda hkrati se pravilno nanaša na barvo ozadja. Na splošno, kot vedno, morate izbirati med brskalniki in veljavnostjo.

S pojavom CSS3 je delo oblikovalcev postavitev v mnogih pogledih postalo preprostejše in bolj logično: navsezadnje lahko zdaj resnično prilagodljivo konfigurirate kateri koli predmet, pri čemer se vse manj zatekate k JavaScriptu. Recimo, da morate prilagoditi prosojnost ozadja - CSS takoj ponudi več možnosti.

Ozadje je podano z naborom atributov (background-repeat, background-attachment, background-origin, background-clip, background-color), vsakega od njih pa je mogoče podati ločeno ali kombinirati pod atributom ozadja. Oglejmo si vsakega od njih podrobneje.

atribut barve ozadja

Tudi IE8 podpira to metodo. Več slik je uporabljenih kot ozadje za prilagodljivo postavitev. Najpomembneje je, da pri uporabi katere koli slike ne pozabite nastaviti tudi barve ozadja v CSS, saj uporabniki morda preprosto ne bodo naložili slike.

atribut položaja ozadja

Če uporabite sliko za nastavitev ozadja bloka, vam bo CSS omogočil, da postavite sliko kamor koli na zaslonu. Privzeto se slika nahaja v zgornjem levem kotu. Atribut sprejema besedne indikacije (zgoraj, spodaj, levo, desno) ali številske (odstotke, slikovne pike in druge merske enote). V tem primeru morate določiti dve vrednosti: vodoravno in navpično:

body (background-position: right center;) - v tem primeru se bo ozadje nahajalo na desni strani strani, razdalje od dna in vrha do slike pa so enake.

atribut velikosti ozadja

Včasih je potrebno z z uporabo CSS raztegnite ozadje ali zmanjšajte njegovo velikost. Če želite to narediti, uporabite atribut velikosti ozadja, velikost ozadja pa lahko nastavite v slikovnih pikah ali odstotkih ali v kateri koli drugi merski enoti.

S tem atributom je nekaj težav: za pravilen prikaz ozadja v prejšnjih različicah brskalnikov je treba uporabiti predpone. seveda, trenutne različice v celoti podpira ta atribut in potreba po posebnih lastnostih je izginila.

atribut ozadja-priponke

Ta atribut določa vedenje slika ozadja pri pomikanju. Torej lahko sprejme 3 vrednosti (brez upoštevanja dedovanja, ki je skupno vsem atributom, predstavljenim v tem članku):

• fiksno— naredi sliko nepremično glede na ozadje;
• drsenje— ozadje se premika skupaj z drugimi elementi;
• lokalni— slika ozadja se pomika, če ima vsebina pomikanje. Ozadje, ki presega vsebino, je fiksno.

Primer uporabe:

telo (pritrditev ozadja popravljena).

Firefox trenutno ne podpira zadnje lastnosti (lokalno).

atribut izvora ozadja

Ta atribut je odgovoren za pozicioniranje elementa. Prvi brskalniki zahtevajo predpone. Lastnost sama ima tri parametre:

• škatla za oblazinjenje postavi ozadje glede na rob, pri čemer upošteva debelino okvirja;
• border-box se od prejšnje lastnosti razlikuje po tem, da lahko mejna črta popolnoma ali delno prekriva ozadje;
• content-box pozicionira sliko in jo poveže z vsebino.

Če je podanih več vrednosti, se lahko brskalniki odzovejo drugače: Firefox in Opera sprejmeta samo prvo možnost.

atribut ponavljanja ozadja

Praviloma, če je ozadje podana s sliko, se mora ponoviti vodoravno ali navpično. Za to se uporablja atribut ponavljanja ozadja. Tako ima lahko ozadje bloka, katerega CSS vsebuje takšno lastnost, enega od več parametrov:

• brez ponovitve— slika se na strani pojavi v eni različici;
• ponovite— ozadje se ponovi vzdolž osi x in y;
• ponovi-x- samo vodoravno;
• ponovitev- samo navpično;
• prostora— ozadje se ponovi, če pa prostora ni mogoče zapolniti, se med slikami pojavijo praznine;
• krog— slika se pomanjša, če celotnega območja ni mogoče zapolniti s celimi slikami.

Primer uporabe atributa:

telo (ponavljanje v ozadju: ponavljanje brez ponavljanja)- podobno ponovitev v ozadju: ponovi-y.

V CSS3 je mogoče nastaviti vrednosti za več slik, če navedete parametre, ločene z vejicami.

atribut posnetka ozadja

Ta atribut določa obnašanje ozadja pod obrobami (na primer v primeru pikčastih obrob):

• škatla za oblazinjenje— ozadje je prikazano strogo znotraj bloka;
• border-box- slika se prilega okvirju;
• content-box— slika v ozadju se pojavi samo znotraj vsebine.

Primer uporabe:

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

Chrom in Safari zahtevata predpono -webkit-.

Atributi motnosti in filtra

Atribut motnosti omogoča nastavitev prosojnosti ozadja – lastnost CSS bo delovala v vseh brskalnikih. Vrednost je mogoče nastaviti od 0,0 do vključno 1,0. S tem lahko nastavite prosojnost CSS ozadje brez cele vrednosti: namesto 0,3 je dovolj, da napišete.3:

.block (slika ozadja: url(img.png); motnost: .3;).

Za nastavitev prosojnosti ozadja, katere CSS bo deloval tudi za IE pod različico 9, uporabite atribut filtra:

.block (slika ozadja: url(img.png); filter: alpha(opacity=30);).

V tem primeru je vrednost neprozornosti nastavljena v območju od 0 do 100. Upoštevajte, da se atribut motnosti razlikuje od nastavitve prosojnosti z uporabo RGBA po dednosti: pri uporabi motnosti postane prosojno ne samo ozadje, ampak tudi vsi elementi znotraj bloka .

Vedno spremljajte statistiko uporabe brskalnika za CIS in vse druge države. Največja težava za vse spletne oblikovalce so stare različice IE, saj ne omogočajo polne uporabe CSS3. Pri kodiranju ne pozabite uporabiti posebne storitve, ki preverijo, ali vaš brskalnik podpira katero koli Lastnost CSS. Če ne morete namestiti starejših različic brskalnikov, poiščite storitev, ki bo preverila delovanje strani različne brskalnike na spletu.

Preglednost ozadja na spletnem mestu je ustvarjena z lastnostmi CSS. Preglednost lahko dosežete na dva načina: z lastnostjo opacity in background:rgba(). Oglejmo si vsakega od njih in nato naredimo primerjavo.

1. Lastnost motnosti CSS za preglednost ozadja

CSS ima lastnost neprozornosti, ki jo lahko uporabite za nastavitev prosojnosti slik, besedil, vključno z ozadji.

Prosojnost lahko nastavite preprosto z določitvijo realno število od 0,0 do 1,0. Manjše kot je število, manj opazen bo predmet.

motnost: 0,5; // Prosojnost motnost: 0,2; // Objekt je viden le 20 % motnost: 0,8; // Objekt je viden le 80 %

Poglejmo primer z lastnostjo nepreglednosti.

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

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

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

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 не ограничивается только фоновым цветом у блоков…