CSS je zkratka pro kaskádové styly. Jedná se o jednoduchý, ale výkonný designový jazyk, který má schopnost transformovat webové stránky. Jednoduše řečeno, zefektivňuje proces prezentace webových stránek a jejich přitažlivosti pro uživatele pomocí . V tomto článku pochopíme, jak implementovat různé obrázky na pozadí v CSS v následujícím pořadí:
- Obrázek na pozadí ve vlastnostech CSS
- Obrázek na pozadí v CSS
- Opakování pozadí
- Příloha na pozadí
- Pozice na pozadí
- Obrázek na pozadí ve velikosti CSS
- Barva pozadí
Obrázek na pozadí ve vlastnostech CSS
Existuje mnoho vlastností, které se používají k řízení chování a umístění obrazu. Jedná se o tyto vlastnosti:
- obrázek na pozadí
- opakování pozadí
- příloha na pozadí
- pozice na pozadí
- velikost pozadí
- barva pozadí
S každou z těchto vlastností se seznámíme a uvidíme, kdy a jak je použít, se zajímavou ukázkou.
Obrázek na pozadí v CSS
The obrázek na pozadí Vlastnost, jak název napovídá, se jednoduše používá k označení a nastavení obrázku na pozadí prostřednictvím prvku na webové stránce. Ve výchozím nastavení je obrázek na pozadí umístěn v levém horním rohu prvku.
syntax: obrázek na pozadí: url | žádný | lineární přechod | radiální přechod
body {background-image: url ('apple.jpg')}pozadí pomocí adresy URL
Pojďme pochopit parametry:
- url: Vstup do tohoto parametru nám umožňuje určit buď cestu k souboru k libovolnému obrázku, nebo adresu URL obrázku, který je třeba nastavit jako pozadí. Aby bylo možné deklarovat více než jeden obrázek, jsou adresy URL odděleny oddělovačem čárky.
body {background-image: url ('apple.jpg')} 
- žádný: Toto je výchozí hodnota vlastnosti a žádný obrázek na pozadí se nevykreslí, pokud je zadána jeho hodnota.
body {background: none}- lineární gradient (): Obrázek na pozadí je nastaven na lineární přechod. Pro tuto vlastnost, tj. Shora dolů, je nutné zadat minimálně alespoň dvě barvy.
body {background-color: # 001 background-image: linear-gradient (white 15%, transparent 16%), linear-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- radiální gradient (): Obrázek na pozadí je nastaven na radiální přechod. Pro tuto vlastnost, tj. Od středu k okraji, je nutné zadat minimálně alespoň dvě barvy.
body {background-color: # 001 background-image: radial-gradient (white 15%, transparent 16%), radial-gradient (white 15%, transparent 16%) background-size: 60px 60px background-position: 0 0, 30px 30px}- repeating-linear-gradient (): Opakuje lineární přechod. Použijme stejný příklad, který jsme viděli výše v lineárním gradientu pro opakující se lineární gradient a uvidíme rozdíl.
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ící se radiální gradient (): Opakuje radiální přechod. Pojďme prozkoumat stejný příklad, který jsme použili výše v radiálním přechodu.
body {barva pozadí: # 001 obrázek pozadí: opakující se radiální gradient (bílý 15%, průhledný 16%), opakující se radiální gradient (bílý 15%, průhledný 16%) velikost pozadí: 60px 60px pozice pozadí : 0 0, 30px 30px}Záložní pozadí
Jako profesionální tip je vždy vhodné přidat barvu pozadí jako záložní možnost. Přichází k záchraně, zejména když se obrázky pozadí nenačítají nebo pozadí přechodu, které jsme nastavili při vývoji, není podporováno některými starými prohlížeči, na kterých je zobrazen.
To nezhoršuje uživatelskou zkušenost a lze to prohlásit takto:
body {background: url (apple_lost.jpg) pink}Více pozadí
Máme také možnost nastavit více obrázků na pozadí a je to vyžadováno ve většině případů, jako je obrázek v popředí a pozadí. Pořadí obrázku je zde důležité, obrázek, který by měl být vpředu, je deklarován jako první a obrázek, který by měl být vzadu poslední, je deklarován jako další.
Níže je uveden příklad více obrázků na pozadí:
body {background-image: url ('small-heart.jpg'), url ('background.jpg')}Opakování pozadí
Vlastnost background-repeat se používá spolu s obrázkem na pozadí k definování chování opakování obrázku. Určuje, zda a jak se bude obrázek na pozadí opakovat. Ve výchozím nastavení se obrázek na pozadí opakuje svisle i vodorovně.
Možné hodnoty jsou:
- opakovat - Obraz se opakuje vodorovně i svisle
- no-repeat - obrázek se neopakuje
- repeat-x - Obrázek se opakuje vodorovně
- repeat-y - Obrázek se opakuje svisle
- mezera - Obraz se opakuje s rovnoměrnými mezerami nebo mezerami mezi nimi.
- kulatý - obrázek se opakuje, aby vyplnil oblast bez mezer mezi nimi.
Syntaxe CSS pro vlastnost opakování pozadí je:
opakování pozadí: opakovat | opakovat-x | opakovat-y | neopakovat | mezera | kolo
body {background-image: url ('heart.png'), url ('background.png') background-repeat: repeat-y, repeat-x background-color: #ffffff}Příloha na pozadí
The příloha na pozadí Vlastnost se používá spolu s obrázkem na pozadí ke stanovení, zda se má obrázek posouvat při posouvání obsahu. Znamená to, že obrázek na pozadí by měl být opraven nebo by se měl posouvat spolu s dokumentem vzhledem k pohledu okna prohlížeče. Výchozí hodnota je posouvání.
Možné hodnoty jsou:
- rolovat - obrázek se posouvá spolu se stránkou.
- opraveno - obrázek se nebude posouvat spolu se stránkou
Syntaxe CSS pro přílohu na pozadí je:
příloha na pozadí: svitek | opraveno
body {background-image: url ('heart.png'), url ('background.png') background-repeat: space, round}Pozice na pozadí
The pozice na pozadí vlastnost se používá k označení umístění nebo umístění obrázku na pozadí. Možné hodnoty jsou:
- horní
- že jo
- dno
- vlevo, odjet
- centrum
- kombinace těchto hodnot (např. vlevo nahoře)
Syntaxe CSS pro pozici na pozadí je:
pozice na pozadí: nahoře | vpravo | vlevo | dole | uprostřed
body {background-image: url ('heart.png') background-repeat: no-repeat background-attachment: scroll}Obrázek na pozadí ve velikosti CSS
Tato vlastnost je jednou z nejužitečnějších, protože nám umožňuje ovládat velikost obrázku na pozadí. Existují různé kombinace, které můžeme s touto vlastností použít, a podle toho získat výsledky. Výchozí hodnota je auto.
U velikosti pozadí lze použít následující hodnoty:
- auto
- délka - výška a šířka obrázku např. 20px 40px.
- procento - výška a šířka obrázku jako procento w.r.t nadřazeného prvku, např. 50% 50%.
- uprostřed - Zarovnejte obraz do středu
- kryt, změna měřítka obrázku tak, aby zcela pokryl oblast pozadí.
- obsahovat, přizpůsobit obrázek tak, aby se vešel, až do jeho skutečné výšky a šířky.
Syntaxe CSS pro pozici na pozadí je:
velikost pozadí: hodnota
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}Barva pozadí
Platí to nejjednodušší ze všech vlastností v CSS. Aplikuje plné barvy na pozadí stránky. Hodnotu pro tuto vlastnost lze zadat v barvách (např. Červená, modrá atd.), Hexadecimální hodnota a hodnota RGB.
Syntaxe CSS pro barvu pozadí je:
barva pozadí: hodnota
body {background-image: url (small-heart.jpg) background-color: # 22a8e3}Tím se uzavírají všechny vlastnosti, které můžeme použít na pozadí. Vždy můžeme vyzkoušet různé kombinace vlastností, jak jsme viděli v naší ukázce.
CSS je zásadní a musí si osvojit dovednosti pro všechny přední webové vývojáře. Pomáhá při navrhování a úpravě pozadí a při vytváření působivých webových stránek a obohacení uživatelské zkušenosti. Nejlepší je experimentovat a plně využít této speciální front-end technologie, protože dokáže zázraky a dynamicky transformuje stránku.
Podívejte se na naše který přichází s živým tréninkem vedeným instruktorem a zkušenostmi z reálného projektu. Toto školení vám umožní ovládat dovednosti práce s webovými technologiemi typu back-end a front-end. Zahrnuje školení na Web Development, jQuery, Angular, NodeJS, ExpressJS a MongoDB.
Fibonacciho algoritmus c ++
Máte na nás dotaz? Uveďte to prosím v sekci komentářů v blogu „Obrázek na pozadí v CSS“ a my se vám ozveme.