Jak změnit barvu pozadí pomocí CSS

Jak změnit barvu pozadí pomocí CSS

Jedním z nejzajímavějších okamžiků v kariéře začínajícího front-end vývojáře je naučit se, jak změnit barvu pozadí webové stránky.





Práce s HTML je skvělá a zábavná, ale s několika řádky CSS můžete oživit své stránky a cestu programování.



Tato příručka pokryje vše, co potřebujete vědět o tom, jak změnit barvu pozadí pomocí CSS.





Získejte nastavení

Vyrazme malou předběžnou práci.

rootování telefonu jej odemkne

Poznámka : Doporučuji použít Kód Visual Studio s Živé rozšíření serveru pro zobrazení změn v reálném čase při aktualizaci HTML a CSS.



  1. Vytvořte složku pro soubory projektu.
  2. Vytvořte index.html soubor pro uložení vašeho HTML. Můžete použít standardní kód nebo jen nastavit , , a tagy.
  3. Vytvořit styles.css soubor pro váš CSS.
  4. Propojte svůj soubor CSS s HTML umístěním uvnitř tagy.

Nyní jste připraveni začít s úpravou CSS.

Příbuzný: Jak vytvořit web Boilerplate



Jak změnit barvu pozadí pomocí CSS

Nejjednodušší způsob, jak změnit barvu pozadí, je cílení na tělo štítek. Poté upravte soubor barva pozadí vlastnictví. Kódy barev můžete najít vyhledáním a použitím rozšíření prohlížeče Google Color Picker

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

Tento kód změní pozadí na pěknou světle modrou.



The barva pozadí nemovitost přijímá barvy v šesti různých formách:

  • název : lightkyblue; (pro bližší přiblížení)
  • hexadecimální kód : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); kde na je alfa (neprůhlednost)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); kde na je alfa (neprůhlednost)

Použijte zkratku Pozadí nemovitost místo barva pozadí pro vyjmutí extra kódu. Pomocí této metody můžete změnit barvu pozadí libovolného prvku HTML.

Vytvořit prvek a dejte mu třídu - v tomto případě třída je panel . Nastavte jeho výška a šířka vlastnosti v CSS. Vyberte prvek v CSS a vybarvěte.

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;
}

Zde můžete vidět tělo Pozadí vlastnost je stylizována nezávisle na .panel Pozadí vlastnictví.

Vlastnost background také přijímá přechody:

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

Jak změnit obrázek na pozadí v CSS

Co když chcete, aby pozadí bylo spíše obrázek než plná barva nebo přechod? Zkratka Pozadí nemovitost je známý přítel.

Ujistěte se, že je obrázek ve stejné složce jako vaše soubory HTML a CSS. V opačném případě budete muset použít cestu k souboru v závorkách, nikoli pouze název:

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

Hej! Vypadá to, že je obrázek příliš zvětšený. Můžete to opravit pomocí velikost pozadí vlastnictví.

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

Chcete -li použít zkratku Pozadí nemovitost ve spojení s velikost pozadí vlastnictví Pokrýt , musíte také určit pozice na pozadí vlastnosti a oddělte hodnoty zpětným lomítkem (i když jsou to výchozí poziční hodnoty jako vlevo nahoře .)

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

Tady máš! Správně velký obrázek na pozadí v jednom řádku CSS.

Přečtěte si více: Jak nastavit obrázek na pozadí v CSS

Poznámka : Dávejte si pozor na velké obrázky na pozadí, které zabírají spoustu úložného prostoru. Načítání na mobilním telefonu může být náročné, protože máte dvě sekundy na to, abyste uživatelům poskytli důvod zůstat na stránce.

Vylepšete svou hru CSS pomocí stínového boxu CSS

Pro vývojáře, jako jste vy, jsou vlastnosti barvy pozadí a obrázku na pozadí staré novinky. Naštěstí se vždy dá něco nového naučit.

Zkuste dát svým boxům podporu pomocí CSS box-shadow. Vaše prvky HTML nikdy nevypadaly lépe!

Podíl Podíl tweet E-mailem Jak používat CSS box-shadow: 13 triků a příkladů

Nevýrazné boxy vypadají nudně. Smrkněte je s efektem CSS box-shadow!

Číst dále Související témata
  • Programování
  • Vývoj webu
  • Webový design
  • CSS
O autorovi Marcus Mears III(26 článků zveřejněno)

Marcus je celoživotní technologický nadšenec a redaktor Writer na MUO. V roce 2020 se vydal na dráhu spisovatele na volné noze a zabýval se trendovými technologiemi, gadgety, aplikacemi a softwarem. Vystudoval informatiku na vysoké škole se zaměřením na front-end vývoj webových aplikací.

Více od Marcuse Mears III

Přihlaste se k odběru našeho zpravodaje

Připojte se k našemu zpravodaji a získejte technické tipy, recenze, bezplatné elektronické knihy a exkluzivní nabídky!

Kliknutím sem se přihlásíte k odběru