Izvršite tehniku s CSS-om
Ako izrađujete web stranicu, možda ćete biti zainteresirani za učenje kako stvoriti fiksnu pozadinsku sliku ili vodeni žig na web stranici. Ovo je uobičajeni dizajn koji je već neko vrijeme bio popularan na mreži. To je praktičan učinak imati u vašem web dizajn vrećicu trikova.
Ako to niste učinili prije ili ste ga prethodno pokušali bez sreće, proces može izgledati zastrašujuće, ali uopće nije baš teško. Pomoću ovog kratkog vodiča dobit ćete informacije koje trebate svladati tehniku u nekoliko minuta pomoću CSS-a.
Početak rada
Pozadinske slike ili vodeni žigovi (koji su zapravo samo vrlo svijetle pozadinske slike) imaju povijest u tiskanom dizajnu. Dokumenti su dugo uključivali vodene žigove na njih kako bi ih spriječili kopiranje. Osim toga, mnogi letci i brošure koriste velike pozadinske slike kao dio dizajna za tiskani komad. Web dizajn dugo posuđuje stilove iz tiska i pozadinske slike su jedan od tih posuđenih stilova.
Te velike pozadinske slike lako se izrađuju pomoću sljedeća tri CSS svojstva stila :
- pozadinska slika
- background-repeat
- Pozadina-pričvršćivanje
- Pozadina veličine
Pozadinska slika
Koristit ćete pozadinsku sliku za definiranje slike koja će se koristiti kao vodeni žig. Taj stil jednostavno upotrebljava putanje datoteke za učitavanje slike koju imate na svojoj web-lokaciji, vjerojatno u imeniku pod nazivom "slike".
pozadina: url (/images/page-background.jpg);
Važno je da je sama slika lakša ili transparentnija od uobičajene slike. To će stvoriti izgled "vodenog žiga" u kojemu se nalazi poluprozirna slika iza teksta, grafike i drugih glavnih elemenata web stranice. Bez ovog koraka, pozadinska slika će se natjecati s informacijama na vašoj stranici i otežati čitanje.
Pozadinsku sliku možete prilagoditi u bilo kojem programu za uređivanje, kao što je Adobe Photoshop.
Background-Ponovi
Prošlo je sljedeće pozadina-ponavljanje. Ako želite da slika bude velika grafička oznaka vodenog žiga, upotrijebite ovaj entitet da bi se ta slika prikazala samo jednom.
pozadina ponoviti: ne-ponoviti;
Bez "ne-ponavljanje" imovine, zadano je da se slika ponavlja više puta na stranici. To je nepoželjno u većini modernih dizajna web stranica, pa se taj stil treba smatrati neophodnim u vašem CSS-u.
Background-attachment
Povezivanje s pozadinom je svojstvo koje mnogi web dizajneri zaboravljaju. Pomoću nje čuva vašu pozadinsku sliku fiksiranu na mjestu kada koristite "fiksni" entitet. To je ono što pretvara tu sliku u vodeni žig koji je fiksiran na stranici.
Zadana vrijednost za ovaj entitet jest "pomaknite se". Ako ne odredite vrijednost pozadine, pozadina će se kretati zajedno s ostatkom stranice.
background-attachment: fiksno;
Pozadina veličini
Pozadina je noviji CSS entitet. Omogućuje vam da postavite veličinu pozadine na temelju prikaza u kojem se pregledava. To je vrlo korisno za responzivne web stranice koje će se prikazivati na različitim veličinama na različitim uređajima .
pozadina veličine: pokriti;
Dvije korisne vrijednosti koje možete upotrijebiti za ovaj entitet uključuju:
- Pokriti - Vaganje pozadine tako da se prikazuje cijela širina ili puna visina. To znači da se neki dijelovi slike možda neće pojaviti na zaslonu, već će čitavo područje biti prekriveno.
- Sadrži - Bilježi sliku tako da se cijela širina i visina prikazuju u uređaju. Slika nije odsječena, ali nedostatak je što dijelovi područja možda nisu pokriveni slikom.
Dodavanje CSS-a na vašu stranicu
Nakon što razumijete gore navedena svojstva i njihove vrijednosti, te stilove možete dodati na svoju web stranicu.
Dodajte sljedeće u HEAD vaše web stranice ako izrađujete stranicu s jednom stranicom. Dodajte ga CSS stilovima vanjskog lista stila ako gradite web stranicu s više stranica i želite iskoristiti snagu vanjskog lista.