Framkvæma tækni með CSS
Ef þú ert að hanna vefsíðu getur þú haft áhuga á að læra hvernig á að búa til fastan bakgrunnsmynd eða vatnsmerki á vefsíðu. Þetta er algeng hönnun sem hefur verið vinsæll á netinu í nokkurn tíma. Það er hagnýt áhrif að hafa í vefhönnunarpokanum þínum af bragðarefur.
Ef þú hefur ekki gert þetta áður eða hefur reynt það áður án þess að heppni, gæti ferlið virst ógnvekjandi en það er í raun ekki mjög erfitt yfirleitt. Með þessari stutta einkatími verður þú að fá þær upplýsingar sem þú þarft til að ná góðum tökum á tækninni á nokkrum mínútum með því að nota CSS.
Að byrja
Bakgrunnsmynd eða vatnsmerki (sem eru í raun bara mjög ljós bakgrunnsmynd) hafa sögu í prentuðu hönnun. Skjöl hafa lengi verið með vatnsmerki á þeim til að koma í veg fyrir að þau séu afrituð. Auk þess nota margar flugmenn og bæklingar stór bakgrunnsmynd sem hluti af hönnuninni fyrir prentað stykki. Vefhönnun hefur lengi lánað stíl frá prenti og bakgrunnsmyndum er ein af þessum lánum stílum.
Þessar stóra bakgrunnsmynd eru auðvelt að búa til með því að nota eftirfarandi þrjár CSS stíl eiginleika:
- bakgrunnsmynd
- bakgrunnur-endurtaka
- bakgrunnur-viðhengi
- bakgrunnsstærð
Bakgrunnur-mynd
Þú verður að nota bakgrunnsmynd til að skilgreina myndina sem verður notuð sem vatnsmerki. Þessi stíll notar einfaldlega skráarslóð til að hlaða mynd sem þú hefur á síðuna þína, líklega í möppu sem heitir "myndir".
bakgrunnsmynd: url (/images/page-background.jpg);
Það er mikilvægt að myndin sjálf sé léttari eða gagnsæ en venjuleg mynd. Þetta mun skapa þetta "vatnsmerki" útlit þar sem hálfgegnsætt mynd liggur fyrir textanum, grafíkinni og öðrum meginþáttum vefsíðunnar. Án þessarar skrefa mun bakgrunnsmyndin keppa við upplýsingarnar á síðunni þinni og gera það erfitt að lesa.
Þú getur breytt bakgrunnsmyndinni í hvaða forrit sem er, eins og Adobe Photoshop.
Bakgrunnur-Endurtaka
Bakgrunnur-endurtaka eignin kemur næst. Ef þú vilt að myndin þín sé stór grafík fyrir vatnsmerki, þá ættir þú að nota þessa eign til að láta myndina birtast aðeins einu sinni.
bakgrunnur-endurtaka: ekki-endurtaka;
Án "eignarinnar" ekki endurtaka er sjálfgefið að myndin muni endurtaka aftur og aftur á síðunni. Þetta er óæskilegt í flestum nútíma hönnun á vefsíðum, þannig að þessi stíll ætti að teljast nauðsynleg í CSS þínum.
Bakgrunnur-Viðhengi
Bakgrunnur-viðhengi er eign sem margir vefhönnuðir gleyma. Með því að nota það heldur bakgrunnsmyndin þín fastur þegar þú notar "fasta" eignina. Það er það sem snýr að myndinni í vatnsmerki sem er fastur á síðunni.
Sjálfgefið gildi fyrir þessa eign er "skruna". Ef þú tilgreinir ekki gildi bakgrunns viðhengis mun bakgrunnurinn fletta með því að hvíla á síðunni.
Bakgrunnur-viðhengi: fastur;
Bakgrunnur-Stærð
Bakgrunnsstærð er nýrri CSS eign. Það gerir þér kleift að stilla stærð bakgrunns byggt á skjánum sem hún er skoðuð inn. Þetta er mjög gagnlegt fyrir móttækilegar vefsíður sem sýna á mismunandi stærðum á mismunandi tækjum .
bakgrunnsstærð: kápa;
Tvær gagnlegar gildi sem þú getur notað til þessa eignar eru:
- Cover - Vogar bakgrunninn þannig að fullur breidd eða fullur hæð sést. Þetta þýðir að sum hlutar myndarinnar birtast ekki á skjánum en að allt svæðið verður fjallað.
- Inniheldur - Vogar myndina þannig að bæði breiddin og hæðin sé sýnd á svæðinu sem er stíll. Myndin er ekki skorin niður, en galli er að hluta svæðisins mega ekki falla undir myndina.
Bætir CSS við síðuna þína
Eftir að þú hefur skilið ofangreindar eiginleikar og gildi þeirra getur þú bætt þessum stílum við á vefsvæðið þitt.
Bættu eftirfarandi við höfuðið á vefsíðunni þinni ef þú ert að búa til eina síðu. Bættu því við CSS stíllinn á ytri stílhlaupi ef þú ert að byggja upp marghliða síðu og vilt nýta kraftinn á ytri blaði.
líkami {
bakgrunnsmynd: url (/images/page-background.jpg);
bakgrunnur-endurtaka: ekki-endurtaka;
Bakgrunnur-viðhengi: fastur;
bakgrunnsstærð: kápa;
}
// ->
Breyttu vefslóð bakgrunnsmyndarinnar til að passa við tiltekna heiti og skráarslóð sem tengist vefsvæðinu þínu. Gerðu aðrar viðeigandi breytingar til að passa hönnunina þína og þú munt hafa vatnsmerki.
Þú getur tilgreint stöðu líka
Ef þú vilt setja vatnsmerki á ákveðnum stað á vefsíðunni þinni, getur þú gert það líka. Til dæmis gætirðu viljað að vatnsmerki mitt á síðunni eða ef til vill í neðri horni, í stað þess að efsta hornið, sem er sjálfgefið.
Til að gera þetta skaltu bæta við bakgrunnsstaðareiginleikanum við stíl þinn. Þetta mun setja myndina á nákvæmlega stað sem þú vilt að hún birtist. Þú getur notað pixla gildi, prósentur eða röðun til að ná þeim staðsetningum áhrifum.
bakgrunnsstaða: miðstöð;