logo

Ako pridať obrázok na pozadí v CSS?

The obrázok na pozadí vlastnosť v CSS sa používa na nastavenie obrázka ako pozadia prvku. Pomocou tejto vlastnosti CSS môžeme pre prvok nastaviť jeden alebo viac obrázkov na pozadí.

V predvolenom nastavení je obrázok umiestnený v ľavom hornom rohu prvku a opakuje sa horizontálne aj vertikálne. Obrázok na pozadí by sa mal zvoliť podľa farby textu. Zlá kombinácia textu a obrázka na pozadí môže byť príčinou zle navrhnutej a nečitateľnej webovej stránky.

The url() hodnota tejto vlastnosti nám umožňuje zahrnúť cestu k súboru k akémukoľvek obrázku. Zobrazí pozadie prvku. Na pozadie môžeme použiť viacero obrázkov alebo zmes prechodov a obrázkov. Ak sa nepodarí načítať obrázok pozadia alebo ak používame prechody, ktoré však príslušný prehliadač nepodporuje, môžeme použiť záložnú hodnotu (hodnotu použitú ako náhradu) ako farbu pozadia prvku.

tlačidlo tkinter

Syntax

 background-image: url(); 

hodnoty

url(): Je to adresa URL obrázka. Ak chceme zadať viac obrázkov, môžeme adresy URL oddeliť čiarkou.

urobiť skript spustiteľným

Príklad

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Vyskúšajte to

Výkon

Ako pridať obrázok na pozadie v CSS

Príklad

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Vyskúšajte to

Výkon

Ako pridať obrázok na pozadie v CSS

Príklad

 body { height: 200px; background-color: #cccccc; background-image: linear-gradient(rgba(0, 0, 255, 0.5),rgba(255, 255, 0, 0.5)), url('lion.webp'); } 
Vyskúšajte to

Výkon

Ako pridať obrázok na pozadie v CSS