Ako zmeniť farbu pozadia pomocou CSS

Ako zmeniť farbu pozadia pomocou CSS

Jeden z najvzrušujúcejších momentov akejkoľvek kariéry začínajúceho front-end vývojára je naučiť sa, ako zmeniť farbu pozadia webovej stránky.





Práca s HTML je skvelá a všetko, ale len s niekoľkými riadkami CSS môžete oživiť svoje stránky a svoju cestu programovania.



Táto príručka sa bude zaoberať všetkým, čo potrebujete vedieť o tom, ako zmeniť farbu pozadia pomocou CSS.





Nastavte sa

Vyrazme malú prípravnú prácu.

tmavý režim prieskumníka súborov nefunguje

Poznámka : Odporúčam použiť Kód Visual Studio s Live serverové rozšírenie na zobrazenie zmien v reálnom čase pri aktualizácii HTML a CSS.



  1. Vytvorte priečinok pre súbory projektu.
  2. Vytvorte súbor index.html súbor na uloženie vášho HTML. Môžete použiť štandardný kód alebo ho len nastaviť , a tagy.
  3. Vytvor styles.css súbor pre váš CSS.
  4. Prepojte svoj súbor CSS s HTML umiestnením vnútri tagy.

Teraz ste pripravení začať s úpravou CSS.

Súvisiace: Ako vytvoriť webovú stránku s kotlom



Ako zmeniť farbu pozadia pomocou CSS

Najjednoduchší spôsob, ako zmeniť farbu pozadia, je zacielenie na telo tag. Potom upravte súbor farba pozadia nehnuteľnosť. Farebné kódy môžete nájsť vyhľadaním a použitím rozšírenia prehliadača Google Color Picker

body {
background-color: rgb(191, 214, 255);
}

Tento kód zmení pozadie na peknú svetlo modrú.



The farba pozadia nehnuteľnosť akceptuje farby v šiestich rôznych formách:

  • názov : lightkyblue; (pre bližšie priblíženie)
  • hexadecimálny kód : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kde do je alfa (nepriehľadnosť)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kde do je alfa (nepriehľadnosť)

Použite skratku pozadie nehnuteľnosť namiesto farba pozadia na zníženie extra kódu. Touto metódou môžete zmeniť farbu pozadia ľubovoľného prvku HTML.

Vytvor prvok a dajte mu triedu - v tomto prípade je trieda panel . Nastavte to výška a šírka vlastnosti v CSS. Vyberte prvok v CSS a zafarbite ho.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

Tu môžete vidieť telo pozadie nehnuteľnosť je štylizovaná nezávisle od .panel pozadie nehnuteľnosť.

Vlastnosť na pozadí tiež akceptuje prechody:

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Ako zmeniť obrázok na pozadí v CSS

Čo keď chcete, aby pozadie bolo skôr obrázkom ako jednofarebnou farbou alebo prechodom? Skratka pozadie nehnuteľnosť je známy priateľ.

Uistite sa, že je obrázok v rovnakom priečinku ako vaše súbory HTML a CSS. V opačnom prípade budete musieť použiť cestu k súboru v zátvorkách, nie iba názov:

body {
background: url(leaves-and-trees.jpg)
}

Hej! Zdá sa, že obrázok je príliš priblížený. Môžete to opraviť pomocou veľkosť pozadia nehnuteľnosť.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Ak chcete použiť skratku pozadie nehnuteľnosť v spojení s veľkosť pozadia nehnuteľnosť kryt , musíte tiež špecifikovať Pozícia na pozadí vlastnosti a hodnoty oddeľte spätnou lomkou (aj keď sú to predvolené pozičné hodnoty ako napr hore v ľavo .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Nech sa páči! Vhodne veľký obrázok na pozadí v jednom riadku CSS.

Čítaj viac: Ako nastaviť obrázok na pozadí v CSS

Poznámka : Dávajte si pozor na veľké obrázky na pozadí, ktoré zaberajú veľa úložného priestoru. Načítanie môže byť náročné pre mobilné telefóny, kde máte všetky dve sekundy na to, aby ste používateľom poskytli dôvod zostať na stránke.

Zlepšite svoju hru CSS pomocou tieňa CSS

Pre vývojára, akým ste vy, sú vlastnosti farby pozadia a obrázku na pozadí starou novinkou. Našťastie sa vždy dá niečo nové naučiť.

Skúste svojim boxom dodať podporu pomocou CSS box-shadow. Vaše prvky HTML nikdy nevyzerali lepšie!

zdieľam zdieľam Tweet E -mail Ako používať CSS box-shadow: 13 trikov a príkladov

Nevkusné boxy pôsobia nudne. Smrknite ich pomocou CSS box-shadow efektu!

Čítajte ďalej Súvisiace témy
  • Programovanie
  • Vývoj webových aplikácií
  • Vzhľad stránky
  • CSS
O autorovi Marcus Mears III(26 publikovaných článkov)

Marcus je celoživotný technologický nadšenec a spisovateľský redaktor v MUO. V roku 2020 sa vydal na nezávislú spisovateľskú kariéru a zaoberal sa trendovými technológiami, gadgetmi, aplikáciami a softvérom. Vyštudoval informatiku na vysokej škole so zameraním na front-end vývoj webových aplikácií.

Viac od Marcusa Mearsa III

prihlásiť sa ku odberu noviniek

Pripojte sa k nášmu bulletinu a získajte technické tipy, recenzie, bezplatné elektronické knihy a exkluzívne ponuky!

Kliknutím sem sa prihlásite na odber