Izvršite tehniku pomoću CSS-a
Ako dizajnirate web stranicu, možda ćete biti zainteresovani da naučite kako da kreirate fiksnu sliku ili vodeni žig na web stranici. Ovo je uobičajeni tretman dizajna koji je već duži period popularan na internetu. To je praktičan efekat u vašoj web dizajnerskoj torbi trikova.
Ako to ranije niste uradili ili ste ranije probali bez sreće, proces bi mogao izgledati zastrašujuće, ali uopšte nije teško. Uz ovaj kratak tutorial, dobićete informacije koje su vam potrebne za savladavanje tehnike za nekoliko minuta koristeći CSS.
Počinjemo
Slike u pozadini ili vodeni žigovi (koji su zaista vrlo lake slike u pozadini) imaju istoriju u štampanom dizajnu. Dokumenti već dugo uključuju vodene žigove na njih kako bi ih sprečili da se kopiraju. Pored toga, mnogi letci i brošure koriste velike pozadinske slike kao deo dizajna za štampani komad. Web dizajn ima dugo pozajmljene stilove od printa, a pozadinske slike su jedan od ovih pozajmljenih stilova.
Ove velike slike u pozadini se lako kreiraju koristeći sljedeća tri osobina CSS stila :
- pozadinska slika
- pozadina-ponavljanje
- background-attachment
- background-size
Pozadinska slika
Koristićete pozadinsku sliku da biste definisali sliku koja će se koristiti kao vaš vodeni žig. Ovaj stil jednostavno koristi putanju datoteke za učitavanje slike koju imate na vašoj web lokaciji, verovatno u imeniku pod imenom "slike".
background-image: url (/images/page-background.jpg);
Bitno je da je sama slika lakša ili transparentnija od normalne slike. Ovo će stvoriti onaj "vodeni žig" u kojem se nalazi poluprecipirana slika iza teksta, grafike i drugih glavnih elemenata web stranice. Bez ovog koraka, slika u pozadini će se nadmetati sa informacijama na vašoj stranici i otežati čitanje.
Možete podesiti pozadinsku sliku u bilo kom programu za uređivanje, kao što je Adobe Photoshop.
Pozadina-Ponavljanje
Sledi svojstvo pozadine-ponavljanje. Ako želite da vaša slika bude grafika velikog vodenog žiga, koristićete ovu osobinu da biste prikazali samo jednu sliku.
background-repeat: no-repeat;
Bez karakteristike "no-repeat", podrazumevano je da će se slika ponoviti iznova i iznova na stranici. To je nepoželjno u većini modernih web stranica dizajna, tako da ovaj stil treba smatrati ključnim u vašem CSS-u.
Background-Attachment
Background-attachment je osobina koju mnogi web dizajneri zaborave. Korišćenjem toga zadržava se u pozadini kada se koristi "fiksna" svojina. To je slika koja pretvara u vodeni žig koji je fiksiran na stranici.
Podrazumevana vrednost za ovu osobinu je "pomeranje." Ako ne navedete vrednost pozadinskog priloga, pozadina će se pomerati zajedno sa ostatkom stranice.
background-attachment: fiksni;
Veličina pozadine
Veličina pozadine je novija CSS svojina. Omogućava vam da podesite veličinu pozadine zasnovane na pogledu na koji se gleda. Ovo je veoma korisno za odgovarajuće web stranice koje će se prikazivati u različitim veličinama na različitim uređajima .
background-size: cover;
Dve korisne vrijednosti koje možete koristiti za ovu nekretninu uključuju:
- Poklopac - uvećava pozadinu tako da je prikazana puna širina ili visoka visina. To znači da se neki delovi slike možda ne pojavljuju na ekranu, ali da će se pokriti celokupno područje.
- Sadrži - uvećava sliku kako bi se prikazala cela širina i visina u stajalištu. Slika nije prekinuta, ali negativna je da dijelovi područja možda neće biti pokriveni slikom.
Dodavanje CSS-a na vašu stranicu
Nakon što shvatite gornja svojstva i njihove vrijednosti, možete dodati ove stilove na vašu web stranicu.
Dodajte sledeće u GLAVU svoje web stranice ako pravite stranicu sa jednim stranicama. Dodajte ga u CSS stilove spoljnog lista stila ako pravite višeznačnu stranicu i želite iskoristiti moć vanjskog lista.
body {
background-image: url (/images/page-background.jpg);
background-repeat: no-repeat;
background-attachment: fiksni;
background-size: cover;
}
// ->
Promenite URL svoje slike u pozadini da biste se podudarali sa određenim imenom datoteke i putanjom datoteke koja je relevantna za vašu web lokaciju. Učinite i druge odgovarajuće promene koje će se uklapati u vaš dizajn i imat ćete vodeni žig.
Možete odrediti poziciju, previše
Ako želite da postavite vodeni žig na određenu lokaciju na vašoj web stranici, to možete uraditi i dobro. Na primer, možda želite vodeni žig na sredini stranice ili možda u donjem uglu, za razliku od gornjeg ugla, koji je podrazumevani.
Da biste to uradili, dodajte svojstvo pozadine u svoj stil. Ovo će postaviti sliku na tačno mesto koje želite da se pojavi. Možete koristiti vrijednosti piksela, procente ili poravnanja kako biste postigli taj efekat pozicioniranja.
pozadinska pozicija: centar;