7 vlastností pozadia CSS na oživenie vašich webových návrhov

Téma pozadia vášho webu môže výrazne ovplyvniť jeho vzhľad a dojem. Farby, obrázky a vzory pozadia vyvolávajú emócie a vytvárajú skvelé používateľské zážitky.

Vlastnosti pozadia CSS môžete použiť na nastavenie štýlu pozadia prvkov HTML. Zistite všetko o niektorých vlastnostiach CSS, ktoré môžete použiť na vytvorenie vynikajúcich pozadí.

1. farba pozadia

The vlastnosť farby pozadia nastavuje farbu pozadia prvku. Farbu môžete nastaviť pomocou názvu ako „červená“, HEX hodnoty ako „#00FF00“ alebo hodnoty RGB – napríklad „rgb (0, 255, 0)“. Môžete tiež použiť hodnotu HSL na nastavenie farby pozadia pomocou odtieňa, sýtosti a svetlosti.

Nasledujúci príklad nastaví farbu pozadia celej stránky na oranžovú. Každý prvok nadpisu má iné pozadie.

<telo>
<h2>Som Zelenýh2>
<h3>Som Červenýh3>
<h4>Som Modráh4>
telo>

Pomocou CSS môžete na každý prvok použiť jedinečnú farbu pozadia:

telo {
farba pozadia: oranžová;
}
h2 {
farba pozadia: #006600;
}
h3 {
farba pozadia: rgb(128, 0, 0);
}





instagram viewer
h4{
farba pozadia: hsl(240, 100%, 50%);
}

Tým sa stránka upraví tak, aby vyzerala takto:

Na určenie priehľadnosti prvku môžete použiť vlastnosť opacity. Nepriehľadnosť nadobúda hodnoty medzi 0,0 a 1,0. Čím je hodnota nižšia, tým je prvok transparentnejší.

Skúste napríklad nastaviť nepriehľadnosť prvku tela na 0,5:

telo {
farba pozadia:oranžová;
nepriehľadnosť:0.5;
}

Zobrazí sa nasledovne – porovnajte farby s farbami na predchádzajúcej snímke obrazovky:

2. obrázok na pozadí

Vlastnosť background-image nastavuje obrázok ako pozadie prvku. Môžete odkazovať na miestny obrázok alebo obrázok z internetu.

<telo>
 <h1>Ahojtam!h1>
 <p>jamaťanobrázokvmôjpozadie!p>
telo>

Súbor CSS:

telo {
obrázok na pozadí:url("https://snímky.pexels.com/fotografie/1191710/pexels-foto-1191710.jpeg?auto=komprimovať&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Toto sa zobrazí takto:

Môžete tiež použiť prechody pozadia vytvoriť jedinečný vzhľad vašej aplikácie.

3. pozadie-opakovať

Vlastnosť background-image štandardne opakuje obrázky. Môžete si zvoliť opakovanie obrázka horizontálne na osi x alebo vertikálne na osi y.

Prípadne, ak opakovanie nevyhovuje vášmu štýlu, môžete ho odstrániť pomocou hodnoty bez opakovania.

<telo>
<h1>Ahoj!h1>
<h3>Na osi x demonštrujem vlastnosť repeat background-repeat!h3>
telo>

Ak chcete použiť opakujúce sa pozadie pozdĺž osi x, použite nasledujúci CSS:

telo {
obrázok na pozadí: url("https://snímky.pexels.com/fotografie/459335/pexels-foto-459335.jpeg?auto=komprimovať&cs=tinysrgb&w=1260&h=750&dpr=1");
pozadie-opakovať: repeat-x;
}

Výsledok:

Potom skúste zopakovať obrázok na osi y:

telo {
obrázok na pozadí:url("https://cdn.pixabay.com/fotografiu/2016/04/18/22/05/mušle-1337565__340.jpg");
pozadie-opakovať:opakovať-y;
}

Výsledok:

Príklad na osi y určite vyzerá skreslene. Ak to nie sú vzory, ktoré hľadáte, môžete špecifikovať bez opakovania namiesto toho:

telo {
obrázok na pozadí:url("https://snímky.pexels.com/fotografie/259915/pexels-foto-259915.jpeg?auto=komprimovať&cs=tinysrgb&w=600");
pozadie-opakovať:neopakovať;
}

Výsledok:

4. pozícia na pozadí

Vlastnosť background-position definuje polohu obrázka na pozadí v rámci jeho prvku. Používa kľúčové slová špecifické pre pozíciu, napr centrum, vrch, a dnoalebo pixel alebo percentuálnu hodnotu.

Pridajte vlastnosť background-position do posledného obrázka:

telo {
obrázok na pozadí: url("https://snímky.pexels.com/fotografie/259915/pexels-foto-259915.jpeg?auto=komprimovať&cs=tinysrgb&w=600");
pozícia na pozadí: topcentrum;
}

Bude to vyzerať takto:

Môžete vidieť, že obrázok skresľuje vzhľad webovej stránky. Opravme to ďalšou vlastnosťou.

5. veľkosť pozadia

Vlastnosť obrázka na pozadí môžete použiť na definovanie špecifickej veľkosti obrázka. Používa kľúčové slová ako kryt a obsahujú alebo pixel alebo percentuálnu hodnotu. Opravme zdeformovaný obrázok na pozadí pridaním vlastnosti veľkosti pozadia.

telo {
 obrázok na pozadí: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 background-repeat: no-repeat;
 pozadie-pozícia: stred;

Výsledok ukazuje, že obrázok teraz proporcionálne pokrýva webovú stránku.

6. pozadie-príloha

Vlastnosť background-attachment definuje, či pozícia obrázka na pozadí zostane pevná alebo sa bude posúvať. Môžete použiť pevné kľúčové slová alebo rolovanie.

Ukážme to v nasledujúcom kóde:

<telo>
<h1>Vlastnosť background-attachmenth1>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
<p>S pevnou vlastnosťou prílohy si všimnete, že pozadie sa nepohybuje s textom.p>
telo>

Súbor CSS:

telo {
obrázok na pozadí: url("https://snímky.pexels.com/fotografie/96627/pexels-photo-96627.jpeg?auto=komprimovať&cs=tinysrgb&w=600");
pozadie-opakovať: bez opakovania;
pozícia na pozadí: centrum;
veľkosť pozadia: kryt;
pozadie-príloha: pevné;
}

Ak sa posuniete nadol po stránke, všimnete si, že pozadie sa nepohne:

Ak chcete demonštrovať vlastnosť scroll background-attachment, zmeňte kľúčové slovo na rolovať. Všimnete si, že pozadie sa teraz pohybuje s textom.

telo {
obrázok na pozadí: url("https://snímky.pexels.com/fotografie/96627/pexels-photo-96627.jpeg?auto=komprimovať&cs=tinysrgb&w=600");
pozadie-opakovať: bez opakovania;
pozícia na pozadí: centrum;
veľkosť pozadia: kryt;
pozadie-príloha: rolovať;
}

7. Pozadie stenografická vlastnosť

Môžete si všimnúť, že na získanie dokonalého pozadia musíte zahrnúť niekoľko vlastností. To zahŕňa písanie veľkého množstva kódu. Kód však môžete skrátiť pomocou vlastnosti skratky pozadia.

Vlastnosť skratky vám umožňuje nastaviť veľa vlastností pozadia v jednom riadku. Používate kľúčové slovo pozadie na nastavenie vlastnosti skratky.

Napríklad namiesto písania kódu takto:

telo {
farba pozadia: zelená;
obrázok na pozadí: url("laptop3.jpg");
pozadie-opakovať: bez opakovania;
veľkosť pozadia: kryt;
pozadie-príloha: rolovať;
pozícia na pozadí: centrum;
}

Môžete to napísať do jedného riadku, takto:

telo {
pozadie: zelenáurl("laptop3.jpg") bez opakovaniakrytrolovaťcentrum;
}

Vlastnosť skratky sa riadi konkrétnym poradím. Vlastnosti musíte zarovnať v tomto poradí, aj keď jedna alebo viac chýba. Objednávka je:

• farba pozadia
• obrázok na pozadí
• pozadie-opakovať
• pozadie-príloha
• pozícia na pozadí

Pomocou CSS môžete vytvárať zaujímavé návrhy pomocou rôznych vzory pozadia. Pomocou týchto vzorov môžete dosiahnuť jedinečné a vynikajúce pozadie pre svoje webové stránky.

Ďalšie vlastnosti pozadia v CSS

CSS je výkonné a môžete s ním urobiť veľa, aby ste svoju aplikáciu okorenili. Na pridanie nejakej animácie môžete použiť vlastnosti ako klip na pozadí, pôvod na pozadí a režim prelínania pozadia.

Na prispôsobenie stránok môžete použiť aj prechody a vzory. Experimentujte s vlastnosťami pozadia CSS, aby ste si vylepšili svoje zručnosti v oblasti webdizajnu.