logo

Kako dodati sliko ozadja v CSS?

The slika ozadja Lastnost v CSS se uporablja za nastavitev slike kot ozadja elementa. Z uporabo te lastnosti CSS lahko nastavimo eno ali več kot eno sliko ozadja za element.

Privzeto je slika nameščena v zgornjem levem kotu elementa in se ponavlja vodoravno in navpično. Sliko ozadja je treba izbrati glede na barvo besedila. Slaba kombinacija besedila in slike ozadja je lahko vzrok za slabo oblikovano in neberljivo spletno stran.

The url() vrednost te lastnosti nam omogoča, da vključimo pot datoteke do katere koli slike. Prikazal bo ozadje elementa. Za ozadje lahko uporabimo več slik ali mešanico prelivov in slik. Če se slika ozadja ne naloži ali če uporabljamo prelive, ki pa niso podprti v ustreznem brskalniku, lahko uporabimo nadomestno vrednost (vrednost, uporabljeno kot zamenjava) kot barvo ozadja elementa.

foreach tipkopis

Sintaksa

 background-image: url(); 

Vrednote

url(): To je URL do slike. URL-je lahko ločimo z vejico, če želimo podati več kot eno sliko.

izbriši zadnjo objavo git

Primer

 body { background-image: url('cat.webp'); background-color: lightgray; } 
Preizkusite zdaj

Izhod

Kako dodati sliko ozadja v CSS

Primer

 body { height: 200px; background-color: #cccccc; background-image: radial-gradient(red, green, yellow); } 
Preizkusite zdaj

Izhod

Kako dodati sliko ozadja v CSS

Primer

 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'); } 
Preizkusite zdaj

Izhod

Kako dodati sliko ozadja v CSS