Dobrý deň, milí čitatelia blogu. Dnes sa pozrieme na päť pravidiel CSS, ktoré vám umožňujú nastaviť pozadie pre akýkoľvek prvok v HTML - pozícia na pozadí (obrázok, opakovanie, farba, príloha). Nezabudnite však spomenúť aj zložené pravidlo Pozadie.
V tomto nie je nič ťažké, ale existujú určité jemnosti a nuansy, ktoré musíte vedieť a už hotová šablóna(pamätajte na to, čo pomôže otvoriť všetky vstupy a výstupy akéhokoľvek dizajnu).
Ešte raz pripomeniem, že tento článok je súčasťou série a bolo by najlepšie začať sa najskôr učiť značenie štýlov, konkrétne s článkom o tom, čo je CSS a s čím sa konzumuje, no, a potom postupujte v uvedenom poradí v referencii. Aj keď je to v každom prípade na vás, ale teraz si povedzme niečo o nastavení pozadia.
Farba, farba pozadia a obrázok na pozadí
Najprv sa pozrime, ako je nastavená farba Prvky HTML používaním Pravidlá farby CSS... V skutočnosti je tu všetko jednoduché. Syntax je úplne normálna a farbu môžete nastaviť podľa toho, ako sa to robilo v jazyku hypertextového značenia. Ako si pamätáte, umiestnené za znakom hash (hash - „# fe35a3“) alebo pomocou troch číslic, ak prvá zodpovedá hodnote druhej, tretia so štvrtou, no a piata so šiestym. (kód farby "# aa33ff" môže byť skrátený ako "a3f").
Rovnaké farby v html a Css kód môže byť reprezentovaný vo forme slov (napríklad „červený“), ale najčastejšie sa používa hexadecimálny kód:
Farba: # 303
Ako príklad som zafarbil tento malý odsek rovnakou farbou ako vyššie (# 303). Teraz sa mierne líši od farby všetkých ostatných odsekov (tmavších), ktorá je v súbore CSS témy WordPress, ktorú používam, nastavená ako # 555. Ale nastavenie farby pomocou farby je celkom jednoduché, ale s pozadím to bude trochu komplikovanejšie.
Takže, pre pozadie v css Existuje päť pravidiel, ktoré je možné v prípade potreby zlúčiť do jedného tímu. Ak ich chcete vidieť, môžete prejsť na aktuálnu stránku špecifikácií W3C a vyhľadať niečo so slovom Pozadie:
- farba pozadia - toto pravidlo nastavuje farbu pozadia pre akýkoľvek prvok Html. V ňom môžete použiť buď kód alebo názov odtieňa, t.j. všetko je presne také, aké bolo pri použití farby.
obrázok na pozadí - s ním môžete použiť obrázok ako pozadie (o tom si však určite prečítajte, pretože ťažké obrázky spomalia načítanie stránky), cesta, ku ktorej bude zadaná vo funkcii url ().
Keď sa pozriete na špecifikácie, uvidíte to predvolená farba pozadia akýkoľvek prvok bude priehľadný (predvolená hodnota pravidla je „farba pozadia: priehľadná“). V prvkoch však nebude predvolene transparentné, pretože toto je systémové prvky a majú všetko odlišne a odlišne od bežných značiek jazyka hypertextového značenia.
Farba vo farbe pozadia je nastavená ako štandardná (šesť alebo tri číslice hexadecimálneho kódu alebo slova):
Farba pozadia: #FEFCDE
Napríklad pozadie tohto odseku je presne nastavené pomocou farby pozadia s farebným kódom uvedeným vyššie.
Všetky ostatné štyri pravidlá CSS sa budú vzťahovať iba na obrázok na pozadí, ktorý je možné nastaviť pre akýkoľvek prvok Html a v prípade potreby ho možno aj presne umiestniť. Ktorý grafický súbor bude použitý, je možné nastaviť pomocou obrázok na pozadí.
Ak sa pozriete na špecifikáciu jazyka značkovacieho štýlu, uvidíte, že predvolený obrázok na pozadí je „žiadny“ (tj. Nie je použitý žiadny obrázok na pozadí). Ak to ešte potrebujete, potom vo funkcii url () budete musieť zadať cestu k nemu:
Obrázok na pozadí: url (https: //site/image/comment_top_focus.gif);
Napríklad pre tento odsek som použil grafický súbor s pozadím, ktorého cesta je popísaná vyššie. Môžete vidieť, že celá oblasť vyhradená pre tento odsek je pokrytá opakujúcim sa obrázkom, ktorý v origináli vyzerá takto:
Títo. pri použití iba jedného pravidla pre obrázok na pozadí označujúceho cestu k grafickému súboru bude tento obrázok vynásobený vertikálne aj horizontálne, kým nebude pokrývať celú oblasť vyhradenú na webovej stránke pre tento konkrétny prvok HTML (v našom prípade išlo o odstavec). Prečo sa to deje?
Opakovanie na pozadí - opakuje obrázok na pozadí
Áno, pretože pre pravidlo CSS sme nenapísali žiadnu hodnotu. pozadie-opakovanie, čo znamená, že preň bude použitá predvolená hodnota. Pri pohľade na špecifikáciu zistíme, že táto hodnota zodpovedá „opakovaniu“ (opakovanie obrazu pozdĺž všetkých osí). Odpoveď prišla sama.
Preto s opakovaním pozadia môžeme spravovať opakovania obrázku na pozadí... Toto pravidlo môže mať iba štyri hodnoty:
Pozícia na pozadí - umiestnenie pozadia
Teraz vyvstáva otázka, je možné presunúť obrázok na pozadí z ľavého horného rohu oblasti obmedzujúcej veľkosť prvku. Samozrejme môžete, a na tento účel existuje samostatné pravidlo Pozícia na pozadí:
Pri pohľade na špecifikáciu CSS je zrejmé, prečo je predvolený obrázok na pozadí vnorený presne do ľavého horného okraja oblasti prvku Html. Pretože hodnota „0% 0%“ je predvolená hodnota pre pravidlo polohy pozadia.
Ak toto pravidlo nie je pre prvok explicitne špecifikované (ako v našom prípade), prehliadač potom vyberie hodnotu, ktorá je v štandarde akceptovaná v špecifikácii (všimnite si, že súradnicové osi v CSS sú hlásené len z ľavého horného okraja plošný prvok).
Zo špecifikácie je tiež zrejmé, že na umiestnenie obrázku na pozadí pomocou polohy na pozadí je možné použiť napríklad relatívne (percentá) a absolútne hodnoty (napríklad). Môžete tiež použiť slová, ktoré budú zodpovedať určitým číselným hodnotám. Ale najskôr.
Pri nastavovaní umiestnenia obrázku na pozadí pomocou absolútnych jednotiek v pozícii na pozadí prebieha nasledujúci princíp určovania jeho konečnej polohy:
Títo. prehliadač vypočíta zadané posuny pozdĺž osí X a Y od začiatku oblasti, v ktorej je objekt umiestnený, k začiatku tohto obrázku. V tomto odseku som napríklad umiestnil obrázok na pozadí z hľadiska polohy pozadia pomocou nasledujúcich pravidiel CSS:
Obrázok na pozadí: url (https: //site/image/logo.png); opakovanie pozadia: neopakovanie; pozícia na pozadí: 400 pixelov 25 pixelov;
Upozorňujeme, že v tomto prípade bude zarovnaný so stredom zobrazovacej oblasti, a nie so stredom oblasti určenej pre tieto odseky. Je zrejmé, že v skutočnosti je nepravdepodobné, že by sa takéto usporiadanie obrázku na pozadí použilo.
Ak však nastavíte pevnú pozíciu pozadia pre prvky, ako napríklad Body alebo Html (tj. V značkách, ktoré pokrývajú celú webovú stránku), tento obrázok bude vždy viditeľný v zobrazovacom poli a presne to je vlastnosť CSS pre pripojenie na pozadí. nachádza v modernom rozložení blokov.
Existuje ešte niečo montované pravidlo Pozadie, čo vám umožňuje skombinovať všetkých päť vyššie popísaných pravidiel do jednej fľaše. Hodnoty pre všetkých päť v prefabrikovanej verzii je navyše možné použiť v ľubovoľnom poradí a v akomkoľvek množstve (sú jedinečné a prehliadač si ich navzájom nezamení). Čokoľvek, čo výslovne neurčíte, bude prehliadač považovať za rovnaké ako predvolená hodnota.
Png) bez opakovania 50%;
Na objasnenie je v tomto odseku použité pravidlo montáže uvedené v príklade. Ukázalo sa to nie krásne, ale to nie je hlavná vec. V tomto odseku je použitá podivná žltá výplň pozadia a obrázok loga LiveInternet zarovnaný do stredu odseku. Pretože pre pravidlo pripojenia na pozadí nie je zadaná žiadna hodnota, potom sa použije predvolená hodnota posúvania.
Ak pre nejaký prvok chcete nastaviť iba výplň farbou a neobťažovať sa obrázkom na pozadí, môžete namiesto toho urobiť dobre:
Farba pozadia: #FEFCDE
napíš:
Pozadie: #FEFCDE
Všetky ostatné hodnoty kombinovaného pravidla budú brané ako predvolené a to je to, čo ste potrebovali.
Veľa šťastia! Uvidíme sa čoskoro na stránkach blogu
Môže vás zaujímať
Štýl zoznamu (typ, obrázok, pozícia) - pravidlá CSS na prispôsobenie vzhľadu zoznamov v kóde Html Ako nastaviť striedanie farby pozadia riadkov tabuliek, zoznamov a ďalších prvkov HTML na webe pomocou pseudotriedy n-dieťa 
Pozícia (absolútna, relatívna a pevná) - spôsoby umiestnenia prvkov HTML v CSS (pravidlá vľavo, vpravo, hore a dole) 
Plávajúce a jasné v CSS - nástroje na rozloženie bloku 
Umiestnenie pomocou Z-indexu a pravidla kurzora CSS na zmenu kurzora myši 
Padding, Margin and Border - nastavíme interné a vonkajšie polstrovanie, ako aj okraje pre všetky strany (hore, dole, vľavo, vpravo) 
Zobrazenie (blokové, žiadne, vložené) v CSS - nastavte typ zobrazenia prvkov Html na webovej stránke 
Priority CSS a posilnenie pomocou dôležitých kombinácií a zoskupení selektorov, vlastných štýlov a štýlov autora 
CSS - čo to je a ako sú kaskádové štýly prepojené Html kód pomocou štýlu a odkazu 
Selektory značiek, tried, id a generických, ako aj selektory atribútov v modernom CSS
Od autora: Vítam všetkých. Farby a obrázky na pozadí hrajú vo webovom dizajne obrovskú úlohu, pretože vám umožňujú atraktívnejšie navrhnúť akékoľvek prvky. Dnes sa pozrieme na to, ako vytvoriť pozadie v html.
Dá sa pri nastavovaní pozadia vystačiť s html?
Hneď musím povedať, že nie. Html spravidla nie je určený na úpravu webových stránok. Je to len veľmi nepohodlné. Existuje napríklad atribút bgcolor, pomocou ktorého môžete nastaviť farbu pozadia, ale je to veľmi nepohodlné.
V súlade s tým použijeme kaskádové štýly štýlov (css). Existuje mnoho ďalších možností nastavenia pozadia. Dnes budeme analyzovať tie najzákladnejšie.
Ako nastavím pozadie pomocou CSS?
V prvom rade sa teda musíte rozhodnúť, pre ktorý prvok potrebujete nastaviť pozadie. To znamená, že musíme nájsť selektor, do ktorého napíšeme pravidlo. Ak je napríklad potrebné nastaviť pozadie pre celú stránku ako celok, môžete to urobiť pomocou voliča tela, pre všetky bloky - pomocou voliča div. No atď. Pozadie môže a malo by byť spojené s akýmikoľvek inými selektormi: triedami štýlu, identifikátormi atď.
Potom, čo ste sa rozhodli pre selektor, musíte napísať názov samotnej nehnuteľnosti. Ak chcete nastaviť farbu pozadia (iba plnú farbu, nie prechod alebo obrázok), použite vlastnosť farba pozadia. Potom musíte vložiť dvojbodku a napísať samotnú farbu. To sa dá urobiť rôznymi spôsobmi. Napríklad pomocou formátov kľúčových slov, hex-kódu, rgb, rgba, hsl. Postačí akákoľvek metóda.
Najbežnejšie používanou metódou je hexadecimálny kód. Na prispôsobenie farieb môžete použiť program, v ktorom je viditeľný kód farby. Napríklad photoshop, farba alebo nejaký online nástroj. Podľa toho napríklad napíšem všeobecné pozadie pre celú webovú stránku.
telo (farba pozadia: # D4E6B3;)
Tento kód je potrebné vložiť do sekcie hlavy. Je dôležité, aby boli súbory v rovnakom priečinku.
Obrázok ako pozadie
Ako obrázok použijem malú ikonu jazyka HTML:
Vytvorme prázdny blok s identifikátorom:
< div id = "bg" > < / div > |
Dajme tomu explicitnú veľkosť a pozadie:
#bg (šírka: 400px; výška: 250px; obrázok na pozadí: url (html.png);)
#bg ( šírka: 400px; výška: 250px; pozadie - obrázok: url (html. png); |
Z tohto kódu vidíte, že som použil novú vlastnosť - background -image. Je určený len na vloženie obrázku ako pozadia pre prvok html. Pozrime sa, čo sa stalo:
Ak chcete nastaviť obrázok, musíte písať za dvojbodkou kľúčové slovo url, a potom v zátvorkách zadajte cestu k súboru. V tomto prípade je cesta zadaná na základe skutočnosti, že obrázok je v rovnakom priečinku ako dokument html. Musíte tiež určiť formát obrázka.
Ak ste to urobili a pozadie sa v bloku stále nezobrazuje, znova skontrolujte, či ste názov obrázku napísali správne, či bola cesta a prípona zadaná správne. Toto sú najčastejšie dôvody, prečo sa pozadie jednoducho nezobrazuje, pretože prehliadač nemôže nájsť obrázok.
Všimli ste si však jednu zvláštnosť? Prehliadač zachytil a reprodukoval obrázok v celom bloku. Aby ste to vedeli, toto je predvolené správanie obrázkov na pozadí - opakujú sa vertikálne a horizontálne, kým sa nezmestia do bloku. Toto správanie môžete ľahko ovládať. Na tento účel použite vlastnosť opakovania pozadia, ktorá má 4 hlavné hodnoty:
Opakovať - predvolená hodnota, obrázok sa opakuje na oboch stranách;
Repeat -x - opakuje sa iba pre ois x;
Repeat-y-opakuje sa iba pozdĺž osi y;
Neopakovať - vôbec sa neopakuje;
Môžete napísať každú hodnotu a zistiť, čo sa stane. Napíšem to takto:
opakovanie na pozadí: opakovanie-x;
pozadie - opakovať: opakovať - x; |
Teraz opakujte iba horizontálne. Bez opakovania by bol iba jeden obrázok.
Skvelé, už to môžete dokončiť, pretože ide o základné možnosti práce s pozadím, ale ukážem vám ďalšie 2 vlastnosti, ktoré vám umožnia získať nad ním väčšiu kontrolu.
Pri opakovaní návrhári rozloženia dosahovali textúry a prechody pozadia pomocou jedného drobného obrázku. Mohlo to byť 30 pixelov x 10 pixelov alebo menej. Možno trochu viac. Obraz bol taký, že keď sa to opakovalo na jednej alebo dokonca na oboch stranách, neboli viditeľné žiadne prechody, takže v dôsledku toho bolo získané jediné pevné pozadie. Mimochodom, tento prístup sa oplatí použiť teraz, ak chcete na pozadí použiť bezšvovú textúru. Dnes je už gradient možné implementovať pomocou metód css3, určite o tom budeme hovoriť.
Pozícia na pozadí
Ak obrázok na pozadí nie je nastavený na opakovanie, bude predvolene v ľavom hornom rohu jeho bloku. Pozíciu je však možné ľahko zmeniť pomocou vlastnosti background-position.
Môžete sa ho opýtať rôznymi spôsobmi. Jednou z možností je jednoducho označiť strany, na ktorých by sa mal obrázok nachádzať:
pozícia na pozadí: vpravo hore;
pozadie - poloha: vpravo hore; |
To znamená, že vertikálne zostáva všetko rovnaké: obrázok na pozadí je umiestnený zhora, ale horizontálne sme zmenili stranu doprava, to znamená vpravo. Ďalší spôsob nastavenia polohy je percentuálny podiel. V takom prípade začína odpočítavanie v každom prípade od ľavého horného rohu. 100% - celý blok. Aby sme teda obrázok umiestnili presne do stredu, napíšeme takto:
poloha pozadia: 50% 50%;
pozadie - pozícia: 50% 50%; |
Nezabudnite na jednu dôležitú vec súvisiacu s určovaním polohy - prvým parametrom je vždy horizontálna poloha a druhým vertikálna poloha. Ak teda uvidíte hodnotu 80% 20%, potom môžete okamžite skonštatovať, že obrázok na pozadí bude silne posunutý doprava, ale nepôjde veľmi nadol.
A nakoniec môžete pozíciu napísať v pixeloch. Všetko je rovnaké, namiesto%sa použije iba px. V niektorých prípadoch môže byť toto polohovanie tiež nevyhnutné.
Skrátený zápis
Súhlasíte s tým, že kód sa ukáže byť dosť ťažkopádny, ak je všetko nastavené tak, ako sme to urobili. Ukazuje sa, že je potrebné nastaviť cestu k obrázku, opakovanie a polohu. Opakovanie a poloha samozrejme nie sú vždy nevyhnutné, ale v každom prípade je správnejšie použiť skrátený zápis vlastností. Vyzerá to takto:
pozadie: # 333 url (bg.jpg) neopakovanie 50% 50%;
pozadie: # 333 url (bg.jpg) neopakovanie 50% 50%; |
To znamená, že prvým krokom je v prípade potreby zaznamenať celkovú plnú farbu pozadia. Potom cesta k obrázku, opakovanie a poloha. Ak nejaký parameter nie je potrebný, jednoducho ho vynecháme. Súhlasíte, je to oveľa rýchlejšie a pohodlnejšie a tiež výrazne obmedzujeme náš kód. Vo všeobecnosti vám odporúčam písať vždy skratkami, aj keď potrebujete zadať iba farbu alebo obrázok.
Ovládanie veľkosti obrázka na pozadí
Náš súčasný imidž nie je vhodný na ďalší trik, preto vezmem ďalší. Nech je veľkosťou ako blok alebo väčšia. Predstavte si teda, že stojíte pred úlohou: vytvoriť obrázok na pozadí, aby úplne nevyplnil celý blok. A obrázok je napríklad ešte väčší ako veľkosť bloku.
Čo môžete v tomto prípade urobiť? Najjednoduchšou a najrozumnejšou možnosťou by samozrejme bolo jednoducho zmenšiť obrázok, ale nie vždy sa to dá. Povedzme, že leží na serveri a v tento moment nie je čas ani príležitosť ho znížiť. Problém je možné vyriešiť použitím vlastnosti background-size, ktorú možno nazvať relatívne novou a ktorá vám umožní manipulovať s veľkosťou obrázka na pozadí a vlastne s akýmkoľvek pozadím.
Môj obrázok teda zaberá všetko miesto v bloku, ale dám mu veľkosť pozadia:
veľkosť pozadia: 80% 50%;
pozadie - veľkosť: 80% 50%; |
Prvým parametrom je opäť horizontálna veľkosť, druhý - vertikálna veľkosť. Vidíme, že všetko bolo správne použité - fotografia sa stala 80% šírky bloku na šírku a polovicou na výšku. Tu stačí jedno objasnenie - nastavením veľkosti v percentách môžete ovplyvniť proporcie obrázku. Dávajte si preto pozor, aby ste nevychádzali z pomeru.
Ako asi hádate, veľkosť pozadia môže byť tiež zadaná v pixeloch. Môžete tiež použiť dve kľúčové slová s významom:
Obálka - obrázok bude zmenšený tak, že aspoň jedna jeho strana úplne vyplní blok.
Obsahovať - zmení mierku tak, aby sa obrázok pri maximálnej veľkosti úplne zmestil do bloku.
Výhodou týchto hodnôt je, že nemenia pomer strán obrazu a ponechávajú ich rovnaké.
Mali by ste tiež pochopiť, že rozťahovanie obrázku môže viesť k zhoršeniu jeho kvality. Môžem uviesť príklad zo života a skutočnej praxe návrhárov rozloženia. Každý vie a chápe, že pri kódovaní pre stolné počítače musíte web prispôsobiť hlavným šírkam monitorov: 1280, 1366, 1920. Ak urobíte obrázok na pozadí s veľkosťou, povedzme, 1280 x 200, a nenastavíte ak má veľkosť pozadia, potom sú obrazovky so šírkou väčšie, objaví sa prázdne miesto, obrázok celú šírku úplne nevyplní.
V 99% prípadov to webovému vývojárovi nevyhovuje, a tak nastaví background-size: cover tak, aby sa obrázok vždy roztiahol na maximálnu šírku okna. Je to dobrý trik, ale teraz sa stretávate s problémom, že používatelia so šírkou obrazovky 1920 pixelov môžu vidieť obraz neoptimálnej kvality.
Pripomínam, že sa roztiahne do maximálnej šírky. V súlade s tým sa kvalita automaticky zhorší. Jediným správnym riešením by bolo spočiatku použiť väčší obrázok - široký 1920 pixelov. Potom bude na najširších obrazovkách vo svojej prirodzenej veľkosti a na ostatných sa bude pomaly orezávať, ale súčasne so správnym výberom obrázka na pozadí vzhľad stránka nebude ovplyvnená.
Vo všeobecnosti je to len 1 príklad toho, ako využiť znalosti, ktoré ste získali v tomto článku, pri zostavovaní skutočných rozložení.
Polopriehľadné pozadie s CSS
Ďalší trik, s ktorým je možné implementovať pomocou css- poschodie priehľadné pozadie... To znamená, že prostredníctvom tohto pozadia bude možné vidieť, čo je za ním.
Ako príklad uvediem celú stránku ako obrázok na pozadí, ktorý sme použili predtým v príkladoch. Pre blok s identifikátorom bg, na ktorom vykonávame všetky naše experimenty, nastavíme pozadie pomocou formátu farby rgba.
Ako som už povedal, v CSS existuje veľa formátov na nastavenie farieb. Jedným z nich je rgb, pomerne známy formát pre tých, ktorí v ňom pracujú grafickí editori... Je to zapísané takto: rgb (17, 255, 34);
Prvá hodnota v zátvorkách je sýtosť červenej, potom zelenej a potom modrej farby. Hodnota môže byť číselná od 0 do 255. V súlade s tým sa formát rgba nelíši, pridá sa iba ďalší parameter - alfa kanál. Hodnota môže byť od 0 do 1, kde 0 je úplná transparentnosť.
krátke info
Verzie CSS
Hodnoty
url Cesta k grafický súbor, ktorý je zadaný v konštrukte url (). V tomto prípade môže byť cesta k súboru zapísaná buď v úvodzovkách (dvojitých alebo jednoduchých), alebo bez nich. none Zruší obrázok na pozadí pre prvok. dedí Dedí hodnotu po rodičovi.HTML5 CSS2.1 IE Cr Op Sa Fx
Objektový model
document.getElementById ("elementID") .style.backgroundImage
Prehliadače
internet Explorer až do 7,0 vrátane aplikuje pozadie na vnútornú stranu okraja prvku, ktorý má nastavenú vlastnosť hasLayout. Ak prvok nemá hasLayout, vlastnosť obrázku na pozadí bude brať do úvahy hranice prvku, ako je uvedené v špecifikácii. Rozdiel v zobrazení bude citeľný, ak sú okraje prerušované alebo bodkované a nie pevné.
Ak je prvok nastavený na posúvanie alebo na automatické, Internet Explorer 8 bude mať pri posúvaní pozadia vertikálne oneskorenie jeden pixel.
Internet Explorer až do verzie 7.0 vrátane túto hodnotu dedičnosti nepodporuje.
Ak je pozadie nastavené pre riadok tabuľky (tag
HTML5 CSS2.1 IE Cr Op Sa Fx
| 1 | 2 | 3 |
Výsledok tento príklad v Prehliadač Chrome znázornené na obr. 1. internetový prehliadač Explorer, Opera a Firefox správne zobrazujú pozadie riadka (obr. 2).
Ryža. 1. Opakovanie pozadia pre každú bunku
Ryža. 2. Pozadie pre celý riadok
Myslím si, že neexistuje ani jeden web, kde by sa nehnuteľnosť nevyužívala CSS pozadie... Zdá sa, čo by mohlo byť jednoduchšie ako táto vlastnosť? Ale nie, jeho možnosti sú oveľa širšie ako obvyklý účel obrázku alebo farby ako pozadia stránky. Niečo bude známe, ale niečo sa pre mnohých určite stane novinkou. V každom prípade bude užitočné dôkladne vedieť, ako pozadie funguje.
CSS3 priniesol do služby veľa nových vecí, jedná sa o transparentnosť a priradenie viacerých obrázkov ako pozadia, ale o tom si povieme nižšie a najskôr sa pozrime na základy danej vlastnosti. pozadie.
farba pozadia
Som si celkom istý, že ste niekoľkokrát urobili priradenie farby pozadia. To je možné vykonať pomocou niekoľkých typov zápisov: pravidelných (používa sa názov farby), hexadecimálnych alebo RGB. Každý typ je rovnaký, použite ten, ktorý sa vám najviac páči. Snažím sa použiť najkratšiu verziu a pre vnímanie je to jednoduchšie a súbor štýlu je o niečo menší.
P (farba pozadia: červená;) p (farba pozadia: # f00;) p (farba pozadia: # ff0000;) p (farba pozadia: rgb (255, 0, 0;))
CSS3 podporuje transparentnosť, takže ho môžete pridať aj do našej farby, napríklad takto:
P (farba pozadia: rgba (255, 0, 0, 0,5);)
Posledná číslica bola nastavená na 50% priehľadnosť. Hodnotu priehľadnosti môžete nastaviť od 0 (úplne priehľadné pozadie) do 1 (úplne nepriehľadné).
obrázok na pozadí
Táto vlastnosť sa tiež používa veľmi často, umožňuje vám priradiť obrázku pozadie. CSS3 pridáva možnosť priradiť k obrázku viacero obrázkov, pričom každý vytvára akúsi vrstvu, takže každý nasledujúci je prekrývajúci s predchádzajúcim. Prečo by to mohlo byť užitočné? Všetko je celkom jednoduché - povedzme, že musíte upevniť malé gombíky v každom rohu stránky. Poskytnutie viac -menej plynulého rozloženia pomocou jedného obrázku nie je možné. Preto urobíme 4 „vrstvy“, presunieme každý obrázok do vlastného rohu a je to, problém je vyriešený
Body (obrázok na pozadí: adresa URL („obrázok1“), adresa URL („obrázok2“), adresa URL („obrázok3“))
Ak potrebujete priradiť jeden obrázok k pozadiu, ponecháme v kóde iba prvý obrázok, myslím si, že je to pochopiteľné.
Pri použití akéhokoľvek obrázku ako pozadia je potrebné mať na pamäti dve pravidlá:
- nastaviť kontrastnú farbu pozadia v prípade, že používateľ z nejakého dôvodu nemôže zobraziť obrázok. Dokáže vypnúť zobrazenie obrázkov a ušetrí dopravu.
- na sprostredkovanie žiadneho nepoužívajte obrázok na pozadí dôležitá informácia... Z vyššie uvedeného dôvodu to užívateľ nemusí vidieť.
Podpora viacerých obrázkov na pozadí je dostatočne široká. Túto funkciu podporujú všetky prehliadače, dokonca aj IE8.