CSS je skratka pre kaskádové štýly. Je to jednoduchý, ale výkonný dizajnový jazyk, ktorý má schopnosť transformovať webové stránky. Jednoducho povedané, zefektívňuje proces vytvárania prezentovateľných webových stránok a ich príťažlivosti pre používateľov pomocou servera . V tomto článku pochopíme, ako implementovať rôzne obrázky na pozadí v CSS v nasledujúcom poradí:
- Obrázok na pozadí vo vlastnostiach CSS
- Obrázok na pozadí v CSS
- Opakovanie pozadia
- Príloha na pozadí
- Pozícia pozadia
- Obrázok na pozadí vo veľkosti CSS
- Farba pozadia
Obrázok na pozadí vo vlastnostiach CSS
Existuje mnoho vlastností, ktoré sa používajú na riadenie správania a umiestnenia obrázka. Tieto vlastnosti sú:
- obrázok na pozadí
- opakovanie pozadia
- príloha na pozadí
- Pozícia na pozadí
- veľkosť pozadia
- farba pozadia
Zoznámime sa s každou z týchto vlastností a s niektorými zaujímavými ukážkami uvidíme, kedy a ako ich použiť.
Obrázok na pozadí v CSS
The obrázok na pozadí Vlastnosť, ako naznačuje názov, sa jednoducho používa na označenie a nastavenie obrázka na pozadí prostredníctvom prvku na webovej stránke. Obrázok na pozadí je predvolene umiestnený v ľavom hornom rohu prvku.
syntax: background-image: url | none | linear-gradient | radiial-gradient
body {background-image: url ('apple.jpg')}pozadie pomocou adresy URL
Poďme pochopiť parametre:
- adresa URL: Vstup do tohto parametra nám umožňuje určiť buď cestu k súboru k ľubovoľnému obrázku, alebo adresu URL obrázka, ktorú je potrebné nastaviť ako pozadie. S cieľom deklarovať viac ako jeden obrázok sú adresy URL oddelené oddeľovačom čiarky.
body {background-image: url ('apple.jpg')} 
- žiadny: Toto je predvolená hodnota vlastnosti a ak je zadaná jej hodnota, nevykreslí sa žiadny obrázok na pozadí.
body {background: none}- lineárny gradient (): Obrázok na pozadí je nastavený na lineárny gradient. Pre túto vlastnosť, tj. Zhora nadol, je potrebné zadať minimálne minimálne dve farby.
body {background-color: # 001 background-image: linear-gradient (white 15%, transparent 16%), linear-gradient (white 15%, transparent 16%) size-size: 60px 60px background-position: 0 0, 30px 30px}- radiálny gradient (): Obrázok na pozadí je nastavený na radiálny gradient. Pre túto vlastnosť, tj od stredu po okraj, je potrebné zadať minimálne dve farby.
body {background-color: # 001 background-image: radiálny gradient (biela 15%, priehľadná 16%), radiálny prechod (biela 15%, priehľadná 16%) veľkosť pozadia: 60px 60px pozícia v pozadí: 0 0, 30px 30px}- opakujúci sa lineárny gradient (): Opakuje lineárny gradient. Použime ten istý príklad, ktorý sme videli vyššie v lineárnom gradiente pre opakujúci sa lineárny gradient a uvidíme ten rozdiel.
body {background-color: # 001 background-image: repeating-linear-gradient (white 15%, transparent 16%), repeating-linear-gradient (white 15%, transparent 16%) size background: 60px 60px background-position : 0 0, 30px 30px}- opakujúci sa radiálny gradient (): Opakuje radiálny gradient. Pozrime sa na rovnaký príklad, aký sme použili vyššie v radiálnom gradiente.
body {background-color: # 001 background-image: repeating-radial-gradient (white 15%, transparent 16%), repeating-radial-gradient (white 15%, transparent 16%) size background: 60px 60px background-position : 0 0, 30px 30px}Záložné pozadie
Ako profesionálny tip sa vždy odporúča pridať farbu pozadia ako alternatívu. Prichádza k záchrane, najmä keď sa obrázky na pozadí nenačítajú alebo prechodové pozadie, ktoré sme nastavili pri vývoji, niektoré staré prehliadače, na ktorých sa zobrazuje, nepodporujú.
To nijako nezhoršuje dojem používateľa a možno to vyhlásiť takto:
telo {background: url (apple_lost.jpg) ružové}Viacnásobné pozadie
Máme tiež možnosť nastaviť viac obrázkov na pozadí a vyžaduje sa to vo väčšine prípadov, napríklad obrázok v popredí a obrázok na pozadí. Tu je dôležité poradie obrázka, ako prvý je deklarovaný obrázok, ktorý by mal byť vpredu, a ako ďalší obrázok, ktorý by mal byť vzadu posledný.
Nižšie uvádzame príklad viacerých obrázkov na pozadí:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Opakovanie pozadia
Vlastnosť background-repeat sa používa spolu s obrázkom na pozadí na definovanie správania pri opakovaní obrázka. Určuje, či a ako sa bude obrázok na pozadí opakovať. Obrázok na pozadí sa predvolene opakuje vertikálne aj horizontálne.
Možné hodnoty sú:
- opakovať - Obrázok sa opakuje horizontálne aj vertikálne
- no-repeat - obrázok sa neopakuje
- repeat-x - Obrázok sa opakuje vodorovne
- repeat-y - Obrázok sa opakuje zvisle
- medzera - Obrázok sa opakuje s párnymi medzerami alebo medzerami medzi nimi.
- okrúhle - obrázok sa opakuje, aby sa oblasť vyplnila bez medzier.
Syntax CSS pre vlastnosť background-repeat je:
opakovanie pozadia: opakovať | repeat-x | repeat-y | no-repeat | medzera | kolo
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Príloha na pozadí
The príloha na pozadí Vlastnosť sa používa spolu s obrázkom na pozadí na určenie, či sa má alebo nemá posúvať obrázok pri posúvaní obsahu. Znamená to, že obrázok na pozadí by mal byť opravený alebo by sa mal posúvať spolu s dokumentom vo vzťahu k pohľadu okna prehliadača. Predvolená hodnota je posúvanie.
Možné hodnoty sú:
- posúvanie - Obrázok sa posúva spolu so stránkou.
- opravené - obrázok sa nebude posúvať spolu so stránkou
Syntax CSS pre prílohu na pozadí je:
príloha na pozadí: zvitok | opravený
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Pozícia pozadia
The Pozícia na pozadí vlastnosť sa používa na označenie umiestnenia alebo umiestnenia obrázka na pozadí. Možné hodnoty sú:
- hore
- správny
- dole
- vľavo
- centrum
- kombinácia týchto hodnôt (napr. vľavo hore)
Syntax CSS pre pozíciu na pozadí je:
Pozícia na pozadí: hore | vpravo | vľavo | dole | v strede
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Obrázok na pozadí vo veľkosti CSS
Táto vlastnosť je jednou z najužitočnejších, pretože nám umožňuje ovládať veľkosť obrázka na pozadí. Existujú rôzne kombinácie, ktoré môžeme s touto vlastnosťou použiť a podľa toho získať výsledky. Predvolená hodnota je auto.
Nasledujúce hodnoty možno použiť s veľkosťou pozadia:
- auto
- dĺžka- výška a šírka obrázka napr. 20px 40px.
- percento- výška a šírka obrázka ako percento w.r.t nadradený prvok napr. 50% 50%.
- stred - Zarovnajte obraz na stred
- kryt, zmena mierky obrázka tak, aby úplne prekryl oblasť pozadia.
- obsahovať, meniť mierku obrázka tak, aby sa zmestil na skutočnú výšku a šírku.
Syntax CSS pre pozíciu na pozadí je:
veľkosť pozadia: hodnotu
body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: 400px 150px, cover}body {background-image: url ('heart.png'), url ('background.png') background-repeat: no-repeat, repeat background-size: contain, 400px 150px}Farba pozadia
Toto je najjednoduchšia zo všetkých vlastností v CSS. Aplikuje jednofarebné farby na pozadie stránky. Hodnotu pre túto vlastnosť je možné určiť farbami (napr. Červenou, modrou atď.), Hexadecimálnou hodnotou a hodnotou RGB.
Syntax CSS pre farbu pozadia je:
farba pozadia: hodnotu
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Týmto sa uzavrú všetky vlastnosti, ktoré môžeme použiť na pozadí. Vždy si môžeme vyskúšať rôzne kombinácie vlastností, ako sme videli na našej ukážke.
CSS je nevyhnutné a musí si osvojiť zručnosti pre každého front-end webového vývojára. Pomáha pri navrhovaní a štylizácii pozadia a pri vytváraní pôsobivých webových stránok a pri vylepšovaní používateľských skúseností. Najlepšie je experimentovať a naplno využívať túto špeciálnu front-end technológiu, pretože dokáže zázraky a dynamicky transformuje stránku.
Vyskúšajte naše ktorá prináša živé školenie vedené inštruktorom a skúsenosti s projektmi v reálnom živote. Toto školenie vám pomôže získať zručnosti v oblasti práce s webovými technológiami typu back-end a front-end. Zahŕňa školenie zamerané na vývoj webových aplikácií, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Fibonacciho algoritmus c ++
Máte na nás otázku? Uveďte to v sekcii komentárov v blogu „Obrázok na pozadí v CSS“ a my sa vám ozveme.