Korisni savjeti

Kako brzo i jednostavno napraviti pozadinsku sliku pomoću html-a

Pin
Send
Share
Send
Send


Bilo koja soba izgledat će mnogo bolje ako je prekrivena skupocjenim perzijskim tepihom. Pa, što je još gore vaše web mjesto? Možda je došlo vrijeme da „pokrije“ svoj pod skupom elegantnom ručno rađenom palačom. Detaljnije ćemo istražiti kako napraviti pozadinu za web mjesto:

Odabir slike

Želio bih započeti odabirom slike. Da biste pozadini izgledali ravnomjernije i ljepše na stranici, a niste se morali zamarati dimenzijama i poravnanjem. Predlažem da odmah potražite bešavne teksture. Što je ovo

Nažalost, nije moguće protegnuti sliku u html-u na cijeli zaslon. Fotografija se koristi u punoj veličini. Ako je slika mala, tada će popločiti cijelo područje, kao na slici ispod. Da biste istegnuli sliku, morate stvoriti dodatni css dokument, a bez toga neće uspjeti.

Iako, imate priliku zaobići sustav. Da biste to učinili, upotrijebite Photoshop i promijenite veličinu slike na širinu zaslona (1280x720). Iako će se u ovom slučaju kad pomaknete prema dolje, slika zamijeniti drugu.

Mnogo je bolja opcija ako ne želite koristiti css bila bi upotreba bešavnih tekstura. Ne vide zglobove Oni su poput tapeta ili moderne pločice u dizajnu. Jedna zamjenjuje drugu i nisu vidljivi spojevi.

Ako vas zanimaju besplatne slike i nedostatak pravnih posljedica za njihovu upotrebu, onda preporučujem pretraživanje na web mjestu Pixabay.com.

Sada radimo s kodom. Moram odmah reći da sada radimo s html-om, odnosno mijenjamo sliku ne za cijelu stranicu, već samo za jednu određenu stranicu na kojoj se piše kod. Ako vas zanimaju promjene cjelokupnog resursa, tada morate kreirati kôd koristeći css, ali o tome više kasnije.

Tako da možete raditi u notepadu, više volim NotePad ++. Mnogo je praktičnije raditi u njemu: kôd je dodan za vas, oznake su istaknute. Program je besplatan, a teži oko 3 MB. Toplo preporučujem, pogotovo ako ste početnik.

Dakle u oznaci tijelo morate dodati atribut pozadina i odredite vezu do slike, odakle će slika biti slika. Evo kako to izgleda u programu.

Jednostavno otvorite bilježnicu i kopirate ovaj kôd. U navodnike stavite vezu do slike koja vam se sviđa.

Slika kao pozadina stranice - HTML

Prvo razmislite o načinu postavljanja pozadinske slike na web mjestu pomoću atributa pozadina oznaka tijelo:

Kao što je u gornjem primjeru, pored slike, preporučuje se navesti boju pozadine (bit će prikazana na web mjestu kada se stranica učita), koja će se kombinirati s pozadinskom slikom i stvoriti kontrast s tekstom na web mjestu. Na primjer, ako na web mjestu koristite bijelu boju teksta, trebali biste odrediti tamnu boju pozadine i postaviti tamnu pozadinsku sliku. U tom će slučaju tekst lako pročitati.

Napomena: Preporuča se postaviti pozadinsku sliku i boju pozadine ne koristeći HTML, već koristeći CSS. U ovom slučaju kôd će biti važeći i ispravniji.

Slika kao pozadina stranice - CSS

U CSS-u se boja i pozadinska slika mogu postaviti s jednim entitetom. pozadina:

Ovdje se koristi objekt Pozadina-pričvršćivanje pozadina stranice je fiksna i pomoću entiteta background-repeat postavlja se horizontalno ponavljanje slike. Ali vrijedi uzeti u obzir da bi se pozadinska slika trebala dobro "zašiti" uz rubove.

Ako želite razvući pozadinsku sliku na veličinu prozora preglednika, koristite svojstvo veličina pozadine: 100%,

U programu za izgradnju web mjesta Nubex za bilo koju web lokaciju možete koristiti veliku sliku kao pozadinu i popraviti je.

Pozadina stranice

Događa se da je stari dizajn web mjesta već dosadan. I želim nešto novo i ukusno. A novi će dizajn biti takav ako ga sami skuhate.

Ali potpuno promijeniti cjelokupni dizajn resursa nezahvalna je stvar. I nemaju svi zaoštrene ruke u ovom poslu. Stoga je najlakše osvježiti stari predložak promjenom boje pozadine resursa ili njegove pozadinske slike.

Postoji nekoliko načina za promjenu pozadine web mjesta. Da biste to učinili, koristite mogućnosti CSS-a ili html-a. No, mnoga svojstva za rad s pozadinom imaju isti naziv i metodologiju primjene u ovim web tehnologijama.

Osnove html pozadine

Kao pozadinu možete koristiti nekoliko elemenata:

  • boja
  • Pozadinska slika
  • Slika teksture.

Mi ćemo se detaljno pozabaviti svakom od njih.

Za postavljanje boje pozadine za web mjesto koristi se svojstvo boje pozadine stila atributa style. Odnosno, da biste postavili primarnu boju web stranice, morate je registrirati unutar oznake. Na primjer:

Html podržava samo 16 ključnih riječi za boju. Evo nekoliko njih: bijela, crvena, plava, crna, žuta i drugi.

Stoga, da biste postavili pozadinu web stranice html, bolje je koristiti heksadecimalni format ili RGB.

Pored odabira boje, dostupne su i druge postavke. Ako je svojstvo boje pozadine postavljeno na prozirno, pozadina stranice postat će prozirna. Ova je vrijednost zadano dodijeljena ovom entitetu.

Sada razmislite o mogućnostima hipertekstualnog jezika za postavljanje pozadina za web mjesto. To se može učiniti pomoću svojstva pozadinske slike.

Pretpostavimo da razvijamo mjesto o poeziji i trebamo koristiti Pegazovu sliku kao supstrat. Krilati konj utjelovit će slobodu pjesnikove kreativne misli!

  • Ponovi-x - pozadinsku sliku ponovi vodoravno,
  • ponoviti-y - okomito
  • ponovite - na obje osi,
  • bez ponavljanja - ponavljanje je zabranjeno.

Među tim opcijama nas zanima potonje. Prije promjene pozadine web mjesta, koristimo ga u našem kodu:

  • Ključna riječ (vrh, dno, centar, lijevo, desno),
  • Postotak - odbrojavanje počinje od gornjeg lijevog ugla,
  • U mjernim jedinicama (piksela).

Koristimo najjednostavniju opciju centriranja:

Dešava se da prilikom pomicanja morate popraviti položaj slike. Stoga, prije nego što napravite sliku pozadinom web mjesta, koristite posebno svojstvo privitka za pozadinu. Vrijednosti koje prihvaća su:


  • svitak,
  • fiksna.

Trebamo zadnju vrijednost. Sada će kod našeg primjera izgledati ovako: [/ HTML]

Tekstualna pozadina stranice

U prvom primjeru za pozadinu smo koristili veliki i lijepi pustinjski krajolik. Ali za takvu ljepotu morate platiti u cijelosti. Težina slike napravljene u visokoj kvaliteti može doseći nekoliko megabajta.

Ova količina ne utječe na brzinu učitavanja stranice preglednika s internetskom vezom velike brzine. Ali što je s mobilnim internetom, čijim će vam preuzimanjem nekoliko "metara" trebati puno vremena?

Svi se ovi problemi rješavaju pomoću teksturne pozadine. Koristi malu sliku kao uzorak teksture. Čak i ako se ponavlja više puta, crtež se učitava samo jednom.

Da biste stvorili tamnu pozadinu za web mjesto, idite na Photoshop, stvorite sliku u obliku trake veličine 1200 piksela i širine 15 piksela. Zatim nanesite jednostavan crno-bijeli gradijent i povežite dobivenu teksturu na stranicu web stranice:

Radi jasnoće, dodali smo tekst i postavili njegovu boju koristeći svojstvo boje. Evo što se dogodilo:

CSS Alati

Sva opisana svojstva također su primjenjiva na kaskadne tablice stilova. Stvorite pozadinu css mjesta prepisivanjem koda za jedan od naših prethodnih primjera:

Rezultat će biti sličan.

Pa, ovdje smo ispitali sve mogućnosti za promjenu pozadine na web mjestu. Sada ostaje samo stvoriti crtež budućeg tepiha i raširiti ga na stranicama vašeg resursa. Ali to je već na vama.

Pogledajte video: HTML i CSS za pocetnike #12 - Stavljanje boje i slike za pozadinu (Rujan 2020).

Pin
Send
Share
Send
Send