Možná si myslíte, že návrh pozadí je jednoduchý, ale CSS má mnoho nejasných a výkonných vlastností, které se můžete naučit.

Motiv pozadí vašeho webu může výrazně ovlivnit jeho vzhled a dojem. Barvy, obrázky a vzory na pozadí vyvolávají emoce a vytvářejí skvělé uživatelské zkušenosti.

Vlastnosti pozadí CSS můžete použít k nastavení stylu pozadí prvků HTML. Zjistěte vše o některých vlastnostech CSS, které můžete použít k vytvoření vynikajících pozadí.

1. barva pozadí

The vlastnost barva pozadí nastavuje barvu pozadí prvku. Barvu můžete nastavit pomocí názvu jako „červená“, HEX hodnoty jako „#00FF00“ nebo hodnoty RGB – jako „rgb (0, 255, 0)“. Můžete také použít hodnotu HSL k nastavení barvy pozadí pomocí odstínu, sytosti a světlosti.

Následující příklad nastaví barvu pozadí celé stránky na oranžovou. Každý prvek nadpisu má jiné pozadí.

<tělo>
<h2>Jsem Zelenýh2>
<h3>Jsem Červenýh3>
<h4>Jsem modrýh4>
tělo>

Pomocí CSS můžete na každý prvek použít jedinečnou barvu pozadí:

tělo {
barva pozadí: oranžový;
}
h2 {
barva pozadí: #006600;
}


h3 {
barva pozadí: rgb(128, 0, 0);
}
h4{
barva pozadí: hsl(240, 100%, 50%);
}
instagram viewer

Tím se stránka upraví tak, aby vypadala takto:

K určení průhlednosti prvku můžete použít vlastnost opacity. Neprůhlednost nabývá hodnot mezi 0,0 a 1,0. Čím nižší je hodnota, tím je prvek průhlednější.

Zkuste například nastavit neprůhlednost prvku těla na 0,5:

tělo {
barva pozadí:oranžový;
neprůhlednost:0.5;
}

Zobrazí se následovně – porovnejte barvy s barvami na předchozím snímku obrazovky:

2. obrázek na pozadí

Vlastnost background-image nastavuje obrázek jako pozadí prvku. Můžete odkazovat na místní obrázek nebo obrázek z internetu.

<tělo>
 <h1>Ahojtam!h1>
 <p>jámítanobrazvmůjPozadí!p>
tělo>

Soubor CSS:

tělo {
obrázek na pozadí:url("https://snímky.pexels.com/fotky/1191710/pexels-foto-1191710.jpeg?auto=komprimovat&cs=tinysrgb&w=1260&h=750&dpr=1");
}

Toto se zobrazí takto:

Můžete také použít pozadí přechody vytvořit jedinečný vzhled vaší aplikace.

3. pozadí-opakování

Vlastnost background-image ve výchozím nastavení opakuje obrázky. Můžete si zvolit opakování obrázku vodorovně na ose x nebo svisle na ose y.

Případně, pokud opakování nevyhovuje vašemu stylu, můžete jej odstranit pomocí hodnoty ne-opakovat.

<tělo>
<h1>Ahoj!h1>
<h3>Ukazuji vlastnost repeat background-repeat na ose x!h3>
tělo>

Chcete-li použít opakující se pozadí podél osy x, použijte následující CSS:

tělo {
obrázek na pozadí: url("https://snímky.pexels.com/fotky/459335/pexels-photo-459335.jpeg?auto=komprimovat&cs=tinysrgb&w=1260&h=750&dpr=1");
pozadí-opakování: opakovat-x;
}

Výsledek:

Dále zkuste zopakovat obrázek na ose y:

tělo {
obrázek na pozadí:url("https://cdn.pixabay.com/fotografie/2016/04/18/22/05/mušle-1337565__340.jpg");
pozadí-opakování:opakovat-y;
}

Výsledek:

Příklad na ose y jistě vypadá zkresleně. Pokud to nejsou vzory, které hledáte, můžete specifikovat ne-opakovat namísto:

tělo {
obrázek na pozadí:url("https://snímky.pexels.com/fotky/259915/pexels-photo-259915.jpeg?auto=komprimovat&cs=tinysrgb&w=600");
pozadí-opakování:neopakovat;
}

Výsledek:

4. pozadí-pozice

Vlastnost background-position definuje pozici obrázku na pozadí v jeho prvku. Používá klíčová slova specifická pro pozici, např centrum, horní, a dno, nebo pixel nebo procentuální hodnotu.

Přidejte vlastnost background-position k poslednímu obrázku:

tělo {
obrázek na pozadí: url("https://snímky.pexels.com/fotky/259915/pexels-photo-259915.jpeg?auto=komprimovat&cs=tinysrgb&w=600");
pozadí-pozice: hornícentrum;
}

Bude to vypadat takto:

Můžete vidět, že obrázek narušuje vzhled webu. Pojďme to opravit další vlastností.

5. velikost pozadí

Vlastnost obrázek na pozadí můžete použít k definování konkrétní velikosti obrázku. Používá klíčová slova jako Pokrýt a obsahovat nebo pixel nebo procentuální hodnotu. Opravme zdeformovaný obrázek na pozadí přidáním vlastnosti background-size.

tělo {
 obrázek na pozadí: url(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? auto=compress&cs=tinysrgb&w=600");
 background-repeat: no-repeat;
 pozadí-pozice: střed;

Výsledek ukazuje, že obrázek nyní pokrývá webovou stránku proporcionálně.

6. pozadí-příloha

Vlastnost background-attachment definuje, zda pozice obrázku na pozadí zůstane pevná nebo se posune. Můžete použít klíčová slova pevná nebo rolovací.

Ukažme si to v následujícím kódu:

<tělo>
<h1>Vlastnost background-attachmenth1>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
<p>S pevnou vlastností přílohy si všimnete, že se pozadí nepohybuje s textem.p>
tělo>

Soubor CSS:

tělo {
obrázek na pozadí: url("https://snímky.pexels.com/fotky/96627/pexels-photo-96627.jpeg?auto=komprimovat&cs=tinysrgb&w=600");
pozadí-opakování: ne-opakovat;
pozadí-pozice: centrum;
velikost pozadí: Pokrýt;
pozadí-příloha: pevný;
}

Pokud se posunete na stránce dolů, všimnete si, že se pozadí nepohybuje:

Chcete-li předvést vlastnost scroll background-attachment, změňte klíčové slovo na svitek. Všimnete si, že nyní se pozadí pohybuje s textem.

tělo {
obrázek na pozadí: url("https://snímky.pexels.com/fotky/96627/pexels-photo-96627.jpeg?auto=komprimovat&cs=tinysrgb&w=600");
pozadí-opakování: ne-opakovat;
pozadí-pozice: centrum;
velikost pozadí: Pokrýt;
pozadí-příloha: svitek;
}

7. Vlastnost těsnopisu na pozadí

Můžete si všimnout, že k získání dokonalého pozadí musíte zahrnout několik vlastností. To zahrnuje psaní velkého množství kódu. Ale můžete zkrátit kód pomocí vlastnosti background shorthand.

Vlastnost zkratky vám umožňuje nastavit mnoho vlastností pozadí na jednom řádku. Používáte klíčové slovo Pozadí pro nastavení vlastnosti zkratky.

Například místo psaní kódu takto:

tělo {
barva pozadí: zelená;
obrázek na pozadí: url("notebook 3.jpg");
pozadí-opakování: ne-opakovat;
velikost pozadí: Pokrýt;
pozadí-příloha: svitek;
pozadí-pozice: centrum;
}

Můžete to napsat na jeden řádek, takto:

tělo {
Pozadí: zelenáurl("notebook 3.jpg") ne-opakovatPokrýtsvitekcentrum;
}

Vlastnost těsnopisu se řídí konkrétním pořadím. Musíte zarovnat vlastnosti v tomto pořadí, i když jedna nebo více chybí. Objednávka je:

  • barva pozadí
  • obrázek na pozadí
  • pozadí-opakování
  • pozadí-příloha
  • pozadí-pozice

Pomocí CSS můžete vytvářet zajímavé návrhy pomocí různých vzory pozadí. Pomocí těchto vzorů můžete dosáhnout jedinečného a výjimečného pozadí pro svůj web.

Další vlastnosti pozadí v CSS

CSS je výkonné a můžete s ním udělat spoustu věcí, abyste svou aplikaci okořenili. K přidání nějaké animace můžete použít vlastnosti jako klip na pozadí, původ pozadí a režim prolnutí pozadí.

K přizpůsobení stránek můžete také použít přechody a vzory. Experimentujte s vlastnostmi pozadí CSS a zdokonalte své dovednosti v oblasti webdesignu.