Konsèy pou kreye yon Watermark Istorik sou yon paj entènèt

Egzekite teknik ak CSS

Si w ap desine yon sit entènèt, ou ka enterese nan aprann kouman yo kreye yon imaj background fiks oswa watermark sou yon paj entènèt. Sa a se yon tretman konsepsyon komen ki te popilè sou entènèt pou kèk tan. Li se yon efè sou la men nan gen sache entènèt konsepsyon ou nan ke trik nouvèl.

Si ou pa te fè sa anvan oswa te eseye li te deja san yo pa chans, pwosesis la ta ka sanble entimidasyon, men li la aktyèlman pa trè difisil nan tout. Avèk sa a leson patikilye kout, ou pral jwenn enfòmasyon ou bezwen metrize teknik la nan yon kesyon de minit lè l sèvi avèk CSS.

Pou kòmanse

Imaj Istorik oswa filigran (ki se reyèlman jis foto trè limyè background) gen yon istwa nan konsepsyon enprime. Dokiman yo gen tan enkli filigran sou yo pou anpeche yo kopye. Anplis de sa, anpil depliyan ak bwochi sèvi ak imaj imè gwo kòm yon pati nan konsepsyon an pou moso an enprime. Konsepsyon sit entènèt gen lontan estrikti prete soti nan enprime ak imaj background se youn nan sa yo Styles prete.

Sa yo imaj gwo background yo fasil yo kreye lè l sèvi avèk twa pwopriyete sa yo style CSS :

Istorik-Imaj

Ou pral sèvi ak background-imaj defini imaj la ke yo pral itilize kòm watermark ou. Sa a style tou senpleman itilize yon chemen dosye chaje yon imaj ke ou gen sou sit ou, gen anpil chans nan yon anyè yo te rele "imaj."

background-image: url (/ imaj / paj-background.jpg);

Li enpòtan pou imaj la tèt li se pi lejè oswa pi transparan pase yon imaj nòmal. Sa a pral kreye "Watermark" gade nan ki yon imaj semi-transparan bay manti dèyè tèks la, grafik, ak lòt eleman prensipal nan paj wèb la. San yo pa etap sa a, imaj la background ap fè konpetisyon ak enfòmasyon ki nan paj ou a epi fè li difisil li.

Ou ka ajiste imaj la background nan nenpòt pwogram koreksyon tankou Adobe Photoshop.

Istorik-Repete

Fondasyon-repete pwopriyete a vini pwochen. Si ou vle imaj ou a gen yon gwo grafik-style grafik, ou ta itilize pwopriyete sa a fè ke imaj montre sèlman yon fwa.

background-repete: pa gen okenn-repete;

San yo pa "repete" pwopriyete a, default la se ke imaj la ap repete sou yo ak sou ankò nan paj la. Sa a se endezirable nan pi modèn paj wèb modèn, se konsa sa a style yo ta dwe konsidere esansyèl nan CSS ou.

Istorik-Dokiman siplemantè

Istorik-atachman se yon pwopriyete ke anpil konsèpteur entènèt bliye sou. Lè l sèvi avèk li kenbe imaj background ou fiks an plas lè ou itilize pwopriyete a "fiks". Li se sa ki vire ki imaj nan yon filigran ki fiks sou paj la.

Valè a default pou pwopriyete sa a se "woulo liv." Si ou pa presize yon valè background-atachman, background nan pral woule ansanm ak rès la nan paj la.

background-atachman: fiks;

Istorik-Size

Istorik-gwosè se yon nouvo pwopriyete CSS. Li pèmèt ou mete gwosè a nan yon background ki baze sou viewport a li se ke yo te wè pous Sa a se trè itil pou sit entènèt reponn ki pral montre nan diferan gwosè sou aparèy diferan .

background-gwosè: kouvri;

De valè itil ou ka itilize pou pwopriyete sa a gen ladan:

Ajoute CSS la nan paj ou

Apre ou fin konprann pwopriyete yo pi wo a ak valè yo, ou ka ajoute sa yo Styles nan sit entènèt ou.

Ajoute sa ki anba la a nan tèt la nan paj wèb ou an si w ap fè yon sit yon sèl paj. Add li nan estil yo CSS nan yon fèy style ekstèn si ou ap bati yon sit milti-paj epi ou vle pran avantaj de pouvwa a nan yon fèy ekstèn.