Ja jūs esat mājas lapas izstrāde, iespējams, jūs interesēs uzzināt, kā izveidot fiksētu fona attēlu vai ūdenszīmi tīmekļa lapā. Šī ir izplatīta dizaina apstrāde, kas tiešsaistē ir bijusi populāra diezgan ilgu laiku. Tas ir ērts efekts, lai jūsu tīmekļa dizaina maisiņā būtu triki.
Ja jūs to iepriekš neesat izdarījis vai esat iepriekš izmēģinājis bez veiksmes, process var šķist biedējošs, bet patiesībā tas nemaz nav ļoti grūti. Izmantojot šo īso apmācību, jūs iegūsiet informāciju, kas jums nepieciešama, lai apgūtu tehniku dažu minūšu laikā, izmantojot CSS.
Darba sākšana
Fona attēliem vai ūdenszīmēm (kas patiesībā ir tikai ļoti gaiši fona attēli) ir vēsture drukātā dizainā. Dokumentos jau sen ir iekļautas ūdenszīmes, lai novērstu to kopēšanu. Turklāt daudzos skrejlapās un brošūrās drukātā gabala noformējumā izmantoti lieli fona attēli. Web dizains jau sen ir aizņēmies stilus no drukas, un fona attēli ir viens no šiem aizņemtajiem stiliem.
Šos lielos fona attēlus ir viegli izveidot, izmantojot šādus trīs CSS stils īpašības:
- fona attēls
- fona atkārtojums
- fona piestiprināšana
- fona lielums
Fona attēls
Jūs izmantosiet fona attēlu, lai definētu attēlu, kas tiks izmantots kā jūsu ūdenszīme. Šis stils vienkārši izmanto faila ceļu, lai ielādētu jūsu vietnē esošo attēlu, iespējams, direktorijā ar nosaukumu attēlus.
fona attēls: url (/images/page-background.jpg);
Ir svarīgi, lai pats attēls būtu gaišāks vai caurspīdīgāks nekā parasts attēls. Tas radīs to "ūdenszīme"izskats, kurā daļēji caurspīdīgs attēls atrodas aiz teksta, grafikas un citiem galvenajiem tīmekļa lapas elementiem. Bez šī soļa fona attēls konkurēs ar jūsu lapas informāciju un apgrūtinās tā lasīšanu.
Fona attēlu var pielāgot jebkurā rediģēšanas programmā, piemēram, Adobe Photoshop.
Atkārtojiet fonu
Nākamais ir rekvizīts fona atkārtojums. Ja vēlaties, lai attēls būtu liels ūdenszīmes stila grafiks, izmantojiet šo rekvizītu, lai attēls tiktu parādīts tikai vienu reizi.
fona atkārtojums: neatkārtot;
Bez nedrīkst atkārtot rekvizītu, noklusējums ir tāds, ka attēls lapā atkārtosies vēl un vēl. Tas ir nevēlami lielākajā daļā mūsdienu tīmekļa lapu noformējumu, tāpēc šis stils jāuzskata par būtisku jūsu CSS.
Fona pielikums
Pielikums fonam ir īpašums, par kuru daudzi tīmekļa dizaineri aizmirst. Izmantojot to, fona attēls tiek fiksēts vietā, kad lietojat fiksēts īpašums. Tas padara šo attēlu par ūdenszīmi, kas ir fiksēta lapā.
Šī rekvizīta noklusējuma vērtība ir ritiniet. Ja nenorādīsit fona pielikuma vērtību, fons ritinās kopā ar pārējo lapu.
fona stiprinājums: fiksēts;
Fona lielums
Fona lielums ir jaunāks CSS īpašums. Tas ļauj iestatīt fona lielumu, pamatojoties uz skatu portu, kurā tas tiek skatīts. Tas ir ļoti noderīgi atsaucīgas vietnes kas tiks parādīti dažādos izmēros dažādās ierīcēs.
fona lielums: vāks;
Divas noderīgas vērtības, kuras varat izmantot šim īpašumam, ir:
- Piesegt - Mērogo fonu tā, lai tiktu parādīts vai nu pilns, vai pilns augstums. Tas nozīmē, ka dažas attēla daļas, iespējams, neparādīsies ekrānā, bet visa teritorija tiks pārklāta.
- Satur - Mērogojiet attēlu, lai veidojamā apgabalā tiktu parādīts gan platums, gan augstums. Attēls nav nogriezts, bet negatīvais ir tas, ka attēls var neaptvert apgabala daļas.
CSS pievienošana savai lapai
Kad esat sapratis iepriekš minētās īpašības un to vērtības, varat pievienot šos stilus savai vietnei.
Ja veidojat vienas lapas vietni, pievienojiet šo savas tīmekļa lapas GALVENEI. Pievienojiet to ārējās stila lapas CSS stiliem, ja veidojat vietni ar vairākām lapām un vēlaties izmantot ārējās lapas iespējas.
Mainiet fona attēla URL, lai tas atbilstu konkrētajam faila nosaukumam un faila ceļam, kas attiecas uz jūsu vietni. Veiciet citas atbilstošas izmaiņas, lai tas atbilstu arī jūsu dizainam, un jums būs ūdenszīme.
Jūs varat arī norādīt pozīciju
Ja vēlaties ievietot ūdenszīmi noteiktā vietā savā tīmekļa lapā, varat to izdarīt arī. Piemēram, jūs varat vēlēties ūdenszīmi lapas vidū vai varbūt apakšējā stūrī, atšķirībā no augšējā stūra, kas ir noklusējums.
Lai to izdarītu, savam stilam pievienojiet rekvizītu background-position. Tas attēlu ievietos tieši tajā vietā, kur vēlaties, lai tas parādās. Lai sasniegtu šo pozicionēšanas efektu, varat izmantot pikseļu vērtības, procentus vai izlīdzinājumus.
background-position: centrs;