pozadinska slika: | none; pozadinska slika: | nijedan | nasljediti; pozadinska slika: <фн-изображение> [ , <фн-изображение> ]*; <фн-изображение> = | nijedan

Opis

Svojstvo slike pozadine(sa engleskog "background image" - "background image") postavlja pozadinsku sliku elementa.

Bilješka

Prilikom postavljanja pozadinske slike, trebali biste navesti i boju pozadine koja će se koristiti ako slika nije dostupna. Kad je slika dostupna, prikazuje se preko boje pozadine. (Na ovaj način, boja će biti vidljiva u prozirnim dijelovima slike).

Pravila korištenja

Počevši od CSS3 (odvojenog zarezima), možete navesti više slika u pozadini odjednom. Ovo će učiniti donje slike pozadine vidljivim kroz prozirna područja gornjih slika pozadine.

JavaScript

[objekt] .style .backgroundImage = "[vrijednost]";

Podrška za preglednike

Specifikacija

Vrednosti

Sve vrijednosti CSS 1 CSS 2.0 CSS 2.1 CSS 2.2 CSS 3

Ništa Ne ukazuje na pozadinsku sliku. url ( ) Određuje URI niz slike unutar "url (...)".

background-image: url (myImage.png);

Url (" ") Određuje URI niz slike unutar" url (...) ", a URI niz je označen s" "" znakovima DOUBLE QUOTE.

background-image: url ("myImage.png");

Naslijedi Ukazuje na to da bi element trebao naslijediti parametre nadređenog elementa.

Početna vrijednost:"Ništa".

Primjer upotrebe

Lista kodova

Pozadinska slika

Dokument sa više slika u pozadini.

> Svojstvo slike pozadine>

Dizajn web stranice počinje s pozadinom.

Bilo bi ispravno propisati boju pozadine - svojstvo boja pozadine, za sigurnosnu mrežu, ako se slika ne učita. U zagradi url () odredite putanju do mape sa slikama.

Prema zadanim postavkama, slika će se ponavljati kao "pločica" sve dok ne ispuni cijeli zaslon preglednika, dok se krećemo prema dolje, naša "pločica" će ispunjavati i drugi ekran i treći, sve dok sadržaj stranice završava . Jasno je da takav rezultat nije visina dizajnerske ideje i nećemo imati „kupaonicu“, već samo blog na kojem je čitljivost vrlo važna točka.

Jednostavna opcija da se riješite "popločavanja" je upotreba velike slike, širine najmanje 1024 px, tako da ispuni cijeli zaslon. Također će biti dobro rješenje za pronalaženje besprijekorne teksture, kada se pomnoži, slika će biti kao jedna cjelina.

Kako pozadinu učiniti privlačnijom?

Hvala Bogu, imamo pomoćnike za ovo:

• bez ponavljanja- onemogući ponavljanje
• repeat-x- ponavljanje uzorka samo vodoravno
• ponoviti-y- ponavljanje uzorka samo okomito

Na primjer:

Zaglavlje bloga

Ovo je tekstura pozadine koja se ponavlja samo vodoravno.

Sljedeći pomagač je vlasništvo background-position, omogućava vam da postavite pozadinsku sliku bilo gdje na ekranu. Ova tehnika je široko rasprostranjena u modernom web dizajnu. Imamo sliku, ali ona nije dio sadržaja, već služi samo kao ukras web stranice.

Naslov

Primjer neponovljive pozadine s datim pozicioniranjem.

Slika se prikazuje samo jednom i nalazi se s desne strane.

Uvlačenje s desne ivice postavljeno je na 200 px kako bi se izbjeglo preklapanje teksta s pozadinom.

Ako želimo da slika bude uvijek vidljiva prilikom pomicanja prema dolje, moramo dodati svojstvo u gornji kod - pozadina-prilog: fiksno;

Koja je razlika između img i pozadinska slika?

Razlika je fundamentalna, tag img umetnuta direktno u telo Html-stranice i odgovoran je za sadržaj (ilustracije, fotografije, avatare), nosi semantičko opterećenje. Vrlo je važno da sliku indeksiraju tražilice i uđe u rezultate pretraživanja. Nekretnine CSS pozadinska slika- učinite web lokaciju jedinstvenom i lijepom, odnosno ovim dizajnom, koji treba iznijeti u vanjsku datoteku CSS stilova ili upotrebu unutar elementa stilu.

Naravno, to ne znači da pozadinska slika neće raditi ako se stavi u tijelo Html-strane. Ali toplo preporučujem da se iznese sve što se tiče dizajna CSS... Kao rezultat toga, dobit ćemo čistu Html-kod:

• ovo će imati pozitivan učinak na indeksiranje web stranice, roboti za pretraživanje voljet će vašu web lokaciju i češće je posjećivati.
• i vaši posjetitelji će biti zadovoljni, web stranica će se učitavati brže zbog male težine.
• vama, kao webmasteru, lakše je raditi s čistim kodom.

Pa, razmotrili smo manje -više sve mogućnosti korištenja svojstva CSS pozadinska slika... Više prijatelja za vežbanje! Slobodno kopirajte kôd i smislite vlastite mogućnosti!

kratke informacije

CSS verzije

Vrednosti

url Vrijednost je put do grafičke datoteke koja je navedena unutar konstrukcije url (). U ovom slučaju, put do datoteke može se napisati ili pod navodnicima (dvostrukim ili pojedinačnim), ili bez njih. none Otkazuje pozadinsku sliku elementa. naslediti Nasleđuje vrednost od roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektni model

document.getElementById ("elementID") .style.backgroundImage

Preglednici

Internet Explorer 7.0 ili noviji primjenjuje pozadinu na unutrašnjost ivice elementa sa postavljenim svojstvom hasLayout. Ako element nema hasLayout, svojstvo background-image će poštovati granice elementa kako je navedeno u specifikaciji. Razlika u prikazu bit će vidljiva ako su granice iscrtane ili isprekidane, a ne čvrste.

Ako je element postavljen za pomicanje ili automatski, Internet Explorer 8 će imati vertikalno kašnjenje od jednog piksela pri pomicanju pozadine.

Internet Explorer do i uključujući verziju 7.0 ne podržava nasljednu vrijednost.

Ako je pozadina postavljena za red tablice (oznaka ), zatim Chrome, Safari, iOS ga ne prikazuju kako je propisano specifikacijom, naime za svaku ćeliju zasebno. Dok bi preglednik trebao pokazati čvrstu pozadinu za cijeli red. Primjer 2 prikazuje kôd koji prikazuje grešku.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultat ovog primjera u pregledniku Chrome prikazan je na Sl. 1. Preglednici Internet Explorer, Opera i Firefox ispravno prikazuju pozadinu linije (slika 2).

Pirinač. 1. Ponavljanje pozadine za svaku ćeliju

Pirinač. 2. Pozadina cijele linije

kratke informacije

CSS verzije

Vrednosti

url Vrijednost je put do grafičke datoteke koja je navedena unutar konstrukcije url (). U ovom slučaju, put do datoteke može se napisati ili pod navodnicima (dvostrukim ili pojedinačnim), ili bez njih. none Otkazuje pozadinsku sliku elementa. naslediti Nasleđuje vrednost od roditelja.

HTML5 CSS2.1 IE Cr Op Sa Fx

Objektni model

document.getElementById ("elementID") .style.backgroundImage

Preglednici

Internet Explorer 7.0 ili noviji primjenjuje pozadinu na unutrašnjost ivice elementa sa postavljenim svojstvom hasLayout. Ako element nema hasLayout, svojstvo background-image će poštovati granice elementa kako je navedeno u specifikaciji. Razlika u prikazu bit će vidljiva ako su granice iscrtane ili isprekidane, a ne čvrste.

Ako je element postavljen za pomicanje ili automatski, Internet Explorer 8 će imati vertikalno kašnjenje od jednog piksela pri pomicanju pozadine.

Internet Explorer do i uključujući verziju 7.0 ne podržava nasljednu vrijednost.

Ako je pozadina postavljena za red tablice (oznaka ), zatim Chrome, Safari, iOS ga ne prikazuju kako je propisano specifikacijom, naime za svaku ćeliju zasebno. Dok bi preglednik trebao pokazati čvrstu pozadinu za cijeli red. Primjer 2 prikazuje kôd koji prikazuje grešku.

HTML5 CSS2.1 IE Cr Op Sa Fx

1

2

3

Rezultat ovog primjera u pregledniku Chrome prikazan je na Sl. 1. Preglednici Internet Explorer, Opera i Firefox ispravno prikazuju pozadinu linije (slika 2).

Pirinač. 1. Ponavljanje pozadine za svaku ćeliju

Pirinač. 2. Pozadina cijele linije

Mislim da ne postoji nijedno mjesto na kojem se nekretnina ne koristi CSS pozadina... Čini se da bi moglo biti jednostavnije od ove nekretnine? Ali ne, njegove mogućnosti su mnogo šire od uobičajene svrhe slike ili boje kao pozadine stranice. Nešto će biti poznato, ali će zasigurno mnogima postati novost. U svakom slučaju, bilo bi korisno dobro znati kako pozadina funkcionira.

CSS3 je donio mnogo novih stvari u svojstvo, ovo je i transparentnost i dodjeljivanje više slika kao pozadine, ali o tome ćemo govoriti u nastavku, a prvo pogledajmo osnove svojstva. background.

boja pozadine

Prilično sam siguran da ste više puta radili zadatke u boji pozadine. To se može učiniti korištenjem nekoliko vrsta zapisa: redovnog (koristi se naziv boje), heksadecimalnog ili RGB zapisa. Svaka vrsta je jednaka, koristite šta god vam se više sviđa. Pokušavam koristiti najkraću verziju, a za percepciju je jednostavnija i datoteka stila je malo manje veličine.

P (boja pozadine: crvena;) p (boja pozadine: # f00;) p (boja pozadine: # ff0000;) p (boja pozadine: rgb (255, 0, 0;))

CSS3 ima podršku za transparentnost, pa ga možete dodati i našoj boji, ovako:

P (boja pozadine: rgba (255, 0, 0, 0.5);)

Posljednja znamenka postavljena je na 50% transparentnosti. Vrijednost transparentnosti možete postaviti od 0 (potpuno prozirna pozadina) do 1 (potpuno neprozirna).

pozadinska slika

Ovo svojstvo se također koristi vrlo često, omogućava vam da sliku dodijelite pozadini. CSS3 dodaje mogućnost dodjeljivanja više slika pozadini, od kojih svaka stvara neku vrstu sloja, tako da se svaka sljedeća nadograđuje na prethodnu. Zašto bi ovo moglo biti korisno? Sve je vrlo jednostavno - recimo da trebate zašrafiti male gumbe u svakom kutu web stranice. Pružanje manje ili više fluidnog izgleda, korištenje jedne slike nije opcija. Stoga napravimo 4 "sloja", premjestimo svaku sliku u svoj kut i to je to, problem je riješen

Telo (slika u pozadini: url ("image1"), url ("image2"), url ("image3"))

Ako trebate dodijeliti jednu sliku pozadini, ostavljamo samo prvu u kodu, mislim da je to razumljivo.
Kada koristite bilo koju sliku kao pozadinu, morate imati na umu dva pravila:

• postavite kontrastnu boju pozadine u slučaju da korisnik iz nekog razloga ne može prikazati sliku. Može isključiti prikaz slika, štedi promet.
• nemojte koristiti pozadinsku sliku za prenošenje važnih informacija. Iz gore navedenog razloga, korisnik to možda neće vidjeti.

Podrška za više pozadinskih slika dovoljno je široka. Svi preglednici, čak i IE8, podržavaju ovo svojstvo.