Izvedite tehniko s CSS
Če načrtujete spletno mesto, vas morda zanima, kako se na spletni strani ustvari fiksna ozadja ali vodni žig. To je običajno oblikovanje, ki je že nekaj časa priljubljeno na spletu. To je priročen učinek, da imate v vaši web design vrečko trikov.
Če tega še niste storili že prej ali če ste ga že preizkusili brez sreče, se morda zdi zastrašujoč, vendar dejansko ni zelo težko. S to kratko vadbo boste dobili informacije, ki jih potrebujete za obvladovanje tehnike v nekaj minutah s pomočjo CSS-a.
Začetek
Slike v ozadju ali vodni žigi (ki so v resnici le zelo lahke slike ozadja) imajo zgodovino v tiskani obliki. Dokumenti že dolgo vsebujejo vodne žige na njih, da bi jih preprečili kopirati. Poleg tega številne letake in brošure uporabljajo velike ozadne slike kot del oblikovanja za tiskani kos. Spletno oblikovanje je že dolgo izposodilo sloge iz tiskanja in slike v ozadju so eden od teh izposojenih slogov.
Te velike slike v ozadju je enostavno ustvariti z naslednjimi lastnostmi sloga CSS :
- slika ozadja
- ponovitev ozadja
- background-attachment
- velikost ozadja
Slika ozadja
Za določitev slike, ki bo uporabljena kot vodni žig, boste uporabili ozadje. Ta slog preprosto uporablja pot do datoteke, da naložite sliko, ki jo imate na svojem spletnem mestu, verjetno v imeniku »slike«.
ozadje-slika: url (/images/page-background.jpg);
Pomembno je, da je slika sama lažja ali bolj pregledna od običajne slike. To bo ustvarilo, da bo videti »vodni žig«, v katerem je za tekstom, grafiko in drugimi glavnimi elementi spletne strani prikazana polprezorna slika. Brez tega koraka bo slika v ozadju tekmovala z informacijami na vaši strani in otežila branje.
Sliko ozadja lahko prilagajate v kateremkoli programu za urejanje, kot je Adobe Photoshop.
Ozadje-Ponovi
Nadaljuje se naslednja lastnost ozadja. Če želite, da je vaša slika velika grafična podoba v vodnem znaku, uporabite to lastnost, da se slika prikaže samo enkrat.
ozadje-ponavljajoče: brez ponavljanja;
Brez lastnosti »brez ponovitve« je privzeto, da se bo slika znova in znova ponovila na strani. To je neželeno v večini sodobnih oblik spletnih strani, zato je ta slog ključnega pomena v vašem CSS.
Ozadje - priloga
Priložnost za ozadje je lastnost, ki jo mnogi spletni oblikovalci pozabijo. Uporaba slike ohranja vašo sliko ozadja, če uporabljate »fiksno« lastnost. To sliko pretvori v vodni žig, ki je pritrjen na stran.
Privzeta vrednost za to znamko je "pomikanje". Če ne določite vrednosti za prilogo v ozadju, se ozadje pomakne skupaj s preostalim delom strani.
background-attachment: fiksno;
Velikost ozadja
Velikost ozadja je novejša lastnost CSS. Omogoča, da nastavite velikost ozadja, ki temelji na pogledu, na katerega se gleda. To je zelo koristno za odzivne spletne strani, ki bodo prikazane v različnih velikostih na različnih napravah .
velikost ozadja: pokrov;
Za to lastnost lahko uporabite dve koristni vrednosti:
- Cover - Označi ozadje, tako da je prikazana celotna širina ali polna višina. To pomeni, da nekateri deli slike morda ne bodo prikazani na zaslonu, temveč da bo pokrito celotno območje.
- Vsebuje - raztegne sliko, tako da sta prikazana celotna širina in višina na slogu. Slika ni odrezana, vendar je spodnja stran, da slike ne smejo pokrivati delov območja.
Dodajanje CSS na svojo stran
Ko boste razumeli zgornje lastnosti in njihove vrednosti, lahko te sloge dodate na svoje spletno mesto.
V naslovno stran vaše spletne strani dodajte naslednje, če ustvarite eno stran. Dodajte ga v sloge CSS zunanjega slognega lista, če gradite večstransko spletno mesto in želite izkoristiti moč zunanjega lista.
telo {
ozadje-slika: url (/images/page-background.jpg);
ozadje-ponavljajoče: brez ponavljanja;
background-attachment: fiksno;
velikost ozadja: pokrov;
}
// ->
Spremenite URL svoje slike v ozadju, da se bo ujemala z določeno datoteko in potjo datoteke, ki je pomembna za vaše spletno mesto. Naredite še kakšne druge ustrezne spremembe, ki ustrezajo vašemu dizajnu, prav tako pa boste imeli vodni žig.
Lahko določite položaj, preveč
Če želite postaviti vodni žig na določeni lokaciji na vaši spletni strani, lahko to naredite tudi. Na primer, morda želite, da je vodni žig na sredini strani ali morda v spodnjem kotu, v nasprotju z zgornjim kotom, ki je privzeto.
Če želite to narediti, dodajte lastnost pozicije v vaš slog. To bo postavilo sliko na točno mesto, ki bi ga želeli prikazati. Za doseganje tega položaja lahko uporabite vrednosti pikslov, odstotke ali poravnave.
background-position: center;