Ipatuman ang pamaagi sa CSS
Kon nagplano ka sa usa ka website, mahimo ka nga interesado nga makat-on kung unsaon paghimo sa usa ka fixed background image o watermark sa usa ka web page. Kini usa ka komon nga disenyo sa pagtambal nga nahimong popular sa internet sulod sa pipila ka panahon. Kini usa ka maayo nga epekto nga adunay sa imong web design nga bag sa mga kalisud.
Kon wala nimo kini gihimo kaniadto o gisulayan kini kaniadto nga walay luck, ang proseso tingali daw makahadlok, apan kini dili kaayo lisud. Uban niining mubo nga pagtulun-an, imong makuha ang kasayuran nga imong gikinahanglan sa pag-master sa pamaagi sulod sa pipila ka mga minuto gamit ang CSS.
Pagsugod
Ang mga hulagway sa background o mga watermark (nga sa tibuuk kaayo nga mga hulagway sa background) adunay kasaysayan sa giimprinta nga disenyo. Ang mga dokumento dugay na nga naglakip sa mga watermark aron dili sila makopya. Dugang pa, daghang mga flyer ug mga brosyur ang naggamit sa dagkong mga larawan sa background isip bahin sa disenyo alang sa giimprinta nga piraso. Ang disenyo sa Web adunay taas nga gihulam nga mga estilo gikan sa imprinta ug mga hulagway sa background mao ang usa sa mga estilo nga hinulaman.
Kining dako nga mga hulagway sa kasulatan sayon nga gamiton gamit ang mosunod nga tulo ka mga kinaiya sa estilo sa CSS :
- background-image
- balik-balik
- background-attachment
- gidak-on sa background
Background-Image
Magamit nimo ang imahen sa kasayuran aron mahulagway ang larawan nga gamiton isip imong watermark. Kini nga estilo naggamit lamang sa usa ka file path aron sa pag-load sa usa ka imahen nga anaa kanimo sa imong site, lagmit sa usa ka direktoryo nga ginganlan og "mga larawan."
background-image: url (/images/page-background.jpg);
Importante nga ang larawan mismo mas magaan o mas hayag kay sa usa ka normal nga hulagway. Kini maghimo sa maong "watermark" tan-awon diin ang usa ka semi-transparent nga larawan anaa sa likod sa teksto, mga graphic, ug uban pang mga nag-unang elemento sa web page. Kon wala kini nga lakang, ang imahen sa kasulatan makigkompetensya sa impormasyon sa imong panid ug maglisud sa pagbasa.
Mahimo nimo ma-adjust ang background image sa bisan unsang programa sa pag-edit sama sa Adobe Photoshop.
Repaso-Ulahi
Ang sunod-sunod nga pag-usab sa kabtangan moabut sa sunod. Kung gusto nimo nga ang imong larawan mahimong usa ka dako nga graphic nga estilo sa watermark, imong gamiton kini nga propyedya aron ang usa ka imahen ipakita lamang usa ka higayon.
balik sa background-balik-balik-balik-balik;
Kon wala ang "dili-pagsubli" nga propyedad, ang default mao nga ang balikbalik nga hulagway sa hulagway sa pahina. Kini dili maayo sa kadaghanan sa modernong mga disenyo sa web page, busa kini nga estilo gikonsiderar nga importante sa imong CSS.
Background-Attachment
Ang background-attachment usa ka kabtangan nga gikalimtan sa daghang mga tigdisenyo sa web. Ang paggamit niini magpabilin sa imong imahen sa background nga gipahimutang sa dihang imong gigamit ang "fixed" nga kabtangan. Mao kini ang nagpabalik sa maong larawan ngadto sa watermark nga gitakda sa panid.
Ang default nga bili alang niini nga propiedad mao ang "scroll." Kon wala nimo mahibal-an ang usa ka bili sa background-attachment, ang background mag-scroll kauban sa ubang bahin sa panid.
background-attachment: fixed;
Sukaranan-Gidak-on
Ang gidak-on sa background usa ka bag-o nga propiedad sa CSS. Kini nagtugot kanimo nga ibutang ang gidak-on sa usa ka background nga gibase sa viewport nga gitan-aw niini. Makatabang kaayo kini alang sa mga responsive nga mga website nga ipakita sa lain-laing mga gidak-on sa lainlaing mga himan .
pananglitan-gidak-on: tabon;
Duha ka mapuslanon nga mga prinsipyo nga imong magamit alang niini nga kabtangan naglakip:
- Hapin - Ang mga timbangan ang background aron ang tibuok gilapdon o bug-os nga gitas-on gipakita. Kini nagpasabot nga ang pipila ka mga bahin sa hulagway dili makita sa screen apan nga ang tibuok nga lugar matabonan.
- Ihatag - Mga timbangan ang hulagway aron ang tibuok gilapdon ug gitas-on gipakita sa lugar nga gihulagway. Ang larawan dili maputol, apan ang kabangis mao nga ang mga bahin sa maong dapit dili matabonan sa larawan.
Pagdugang sa CSS sa Imong Pahina
Human nimo masabtan ang mga kabtangan sa ibabaw ug ang ilang mga prinsipyo, mahimo nimong idugang kining mga estilo sa imong website.
Idugang ang mosunod ngadto sa HEAD sa imong web page kon ikaw maghimo og usa ka pahina nga site. Idugang kini sa estilo sa CSS sa usa ka estilo sa gawas nga estudyo kung ikaw nagtukod og usa ka multi-page site ug gusto nga pahimuslan ang gahum sa usa ka external sheet.