Če ste oblikovanje spletne strani, vas bo morda zanimalo, kako na spletni strani ustvariti sliko v ozadju ali vodni žig v fiksnem položaju. To je običajna oblika oblikovanja, ki je že nekaj časa priljubljena na spletu. Priročen učinek je, če imate v svoji spletni obliki trikov trike.
Če tega še niste storili ali ste že prej poskusili brez sreče, se vam zdi postopek zastrašujoč, vendar pravzaprav sploh ni zelo težaven. S to kratko vadnico boste v nekaj minutah s pomočjo CSS dobili informacije, ki jih potrebujete za učenje tehnike.
Kako začeti
Slike ozadja ali vodni žigi (ki so v resnici le zelo lahke slike ozadja) imajo zgodovino tiskanega oblikovanja. Dokumenti že dolgo vsebujejo vodne žige, da preprečijo kopiranje. Številni letaki in brošure poleg tega uporabljajo velike slike v ozadju kot del oblikovanja tiskanega dela. Spletno oblikovanje si že dolgo izposoja sloge iz tiska, slike v ozadju pa so eden izmed teh izposojenih stilov.
Te velike slike v ozadju je enostavno ustvariti z uporabo naslednjih treh CSS slog lastnosti:
- slika ozadja
- ozadje-ponovitev
- ozadje-priloga
- velikost ozadja
Slika ozadja
Sliko ozadja boste uporabili za določitev slike, ki bo uporabljena kot vaš vodni žig. Ta slog preprosto uporablja datotečno pot za nalaganje slike, ki jo imate na svojem spletnem mestu, verjetno v imeniku z imenom slike.
slika ozadja: url (/images/page-background.jpg);
Pomembno je, da je slika sama lažja ali preglednejša od običajne slike. To bo ustvarilo, da "vodni žig"pogled, pri katerem se za besedilom, grafiko in drugimi glavnimi elementi spletne strani skriva polprozorna slika. Brez tega koraka bo slika v ozadju tekmovala z informacijami na vaši strani in bo otežila branje.
Sliko za ozadje lahko prilagodite v katerem koli programu za urejanje, kot je Adobe Photoshop.
Ponovitev ozadja
Naslednja je lastnost ponovitve ozadja. Če želite, da je vaša slika velika grafika v obliki vodnega žiga, bi to lastnost uporabili za prikaz samo enkrat.
background-repeat: no-repeat;
Brez brez ponovitve lastnost, privzeto je, da se slika na strani ponavlja vedno znova. To je nezaželeno pri večini sodobnih oblik spletnih strani, zato bi moral biti ta slog v vašem CSS nujen.
Ozadje-priloga
Priloga v ozadju je lastnost, na katero mnogi spletni oblikovalci pozabijo. Z njegovo uporabo ohranite sliko v ozadju na mestu, ko uporabljate določen lastnine. To je tisto, kar sliko spremeni v vodni žig, ki je pritrjen na strani.
Privzeta vrednost za to lastnost je pomaknite se. Če ne določite vrednosti priloge v ozadju, se bo ozadje pomaknilo skupaj s preostalo stranjo.
pritrditev ozadja: fiksno;
Velikost ozadja
Velikost ozadja je novejša lastnost CSS. Omogoča vam, da nastavite velikost ozadja glede na pogled v katerem si ga ogledujete. To je zelo koristno za odzivna spletna mesta ki se bo prikazal v različnih velikostih na različnih napravah.
velikost ozadja: naslovnica;
Dve koristni vrednosti, ki ju lahko uporabite za to lastnost, sta:
- Pokrov - Ozadje prilagodi tako, da je prikazana celotna širina ali celotna višina. To pomeni, da se nekateri deli slike morda ne bodo pojavili na zaslonu, ampak da bo pokrito celotno območje.
- Vsebujejo - Sliko prilagodi tako, da sta na celotnem območju prikazana celotna širina in višina. Slika ni odrezana, slaba stran pa je, da deli območja morda ne bodo zajeti.
Dodajanje CSS na svojo stran
Ko razumete zgornje lastnosti in njihove vrednosti, lahko te sloge dodate na svoje spletno mesto.
Če izdelujete enostransko spletno mesto, v HEAD vaše spletne strani dodajte naslednje. Če ga gradite na več straneh in želite izkoristiti moč zunanjega lista, ga dodajte v sloge CSS zunanjega sloga.
Spremenite URL slike v ozadju tako, da se ujema z določenim imenom datoteke in potjo datoteke, ki je pomembna za vaše spletno mesto. Izvedite tudi druge ustrezne spremembe, ki ustrezajo vašemu dizajnu, in dobili boste vodni žig.
Lahko določite tudi položaj
Če želite vodni žig postaviti na določeno mesto na svoji spletni strani, lahko to storite tudi vi. Na primer, morda boste želeli vodni žig na sredini strani ali morda v spodnjem kotu, v nasprotju s privzetim zgornjim vogalom.
Če želite to narediti, v svoj slog dodajte lastnost položaja ozadja. S tem bo slika postavljena na točno tisto mesto, kjer bi želeli, da se prikaže. Za doseganje tega položaja lahko uporabite vrednosti slikovnih pik, odstotke ali poravnave.
položaj ozadja: sredina;