Men ki jan yo ajoute imaj konsepsyon reponn lè l sèvi avèk CSS
Gade nan sit entènèt popilè jodi a ak yon sèl tretman konsepsyon ke ou se asire w ke ou wè se gwo, ekran-spanning imaj background. Youn nan defi yo ak ajoute imaj sa yo soti nan pratik ki pi bon ke sou sit entènèt yo dwe reponn a diferan gwosè ekran ak aparèy - yon apwòch ke yo rekonèt kòm konsepsyon entènèt konsepsyon .
Depi chanjman Layout sit entènèt ou a ak balans ak gwosè ekran diferan, se konsa tou yo dwe imaj sa yo background echèl gwosè yo kòmsadwa.
An reyalite, sa yo "imaj likid" yo se youn nan moso kle yo nan sit entènèt reponn (ansanm ak yon griyaj likid ak demann medya). Moun sa yo ki twa moso yo te yon diskontinu nan konsepsyon entènèt reponn depi nan konmansman an, men pandan ke li te toujou jistis fasil yo ajoute imaj aliye reponn nan yon sit (imaj inline yo se grafik yo ke yo kode kòm yon pati nan marke a HTML), fè menm ak imaj background (ki fè yo estile nan paj la lè l sèvi avèk pwopriyete background CSS) ki depi lontan te bay yon defi enpòtan anpil konsèpteur entènèt ak devlopè fen devan yo. Erezman, adisyon a nan "background-gwosè" pwopriyete a nan CSS te fè sa posib.
Nan yon atik separe, mwen kouvri kouman yo sèvi ak pwopriyete CSS3 background-gwosè a detire imaj nan anfòm nan yon fenèt, men gen yon menm pi bon, plis itil fason deplwaye pou pwopriyete sa a. Pou fè sa, nou pral sèvi ak pwopriyete sa a ak valè konbinezon:
background-gwosè: kouvri;
Pwopriyete a mo kle kouvri navigatè a echèl imaj la nan anfòm fenèt la, kèlkeswa ki jan gwo oswa ti fenèt sa a vin. Se imaj la scaled yo kouvri ekran an tout antye, men pwopòsyon orijinal yo ak rapò aspè yo kenbe entak, anpeche imaj la tèt li soti nan yo te defòme.
Se imaj la mete nan fennèt la gwo tankou posib pou ke sifas la fenèt tout kouvri. Sa vle di ke ou pa pral gen okenn tach vid nan paj ou a oswa nenpòt deformation sou imaj la, men li vle di tou ke kèk nan imaj la ka pran pare depann sou rapò a aspè nan ekran an ak imaj la nan kesyon an. Pou egzanp, bor yo nan yon imaj (swa tèt, anba, agoch, oswa dwa) ka koupe sou imaj yo, depann sou ki valè ou itilize pou pwopriyete a background-pozisyon. Si ou oryante background nan "tèt kite", nenpòt ki depase sou imaj la ap vini sou pati yo anba ak dwa. Si ou sant imaj la background, depase an ap vini nan tout kote sa yo, men depi sa depase se pwopaje soti, enpak la sou nenpòt ki bò yon sèl pral mwens sèvi.
KOUMAN POU SÈVI AK gwosè background: kouvri;
Lè kreye imaj background ou, li nan yon bon lide yo kreye yon imaj ki se jistis gwo. Pandan ke navigatè ka fè yon imaj ki pi piti san yo pa yon enpak aparan sou bon jan kalite vizyèl, lè yon navigatè balanse moute yon imaj nan yon gwosè pi gwo pase li nan dimansyon orijinal yo, yo pral bon jan kalite a vizyèl ap degrade, vin twoub ak pixelated. Enkonvenyans sa a se ke paj ou a pran yon frape pèfòmans lè w ap fournir imaj jeyan nan tout ekran.
Lè ou fè sa, asire ou byen prepare imaj sa yo pou vitès download ak livrezon entènèt . Nan fen a, ou bezwen jwenn mwayen an kè kontan ant yon gwosè gwo ase ak kalite ak yon gwosè dosye rezonab pou vitès download.
Youn nan fason yo komen yo sèvi ak imaj efasman imajine se lè ou vle ke imaj yo pran tout background nan nan yon paj, si paj sa a lajè epi yo te wè sou yon òdinatè Desktop oswa anpil pi piti epi yo te voye nan yon pòtatif, mobil aparèy.
Voye imaj ou nan lame entènèt ou an epi ajoute li nan CSS ou kòm yon imaj background:
background-image: url (fedatifis-sou-wdw.jpg);
background-repete: pa gen okenn-repete;
background-pozisyon: sant sant;
background-atachman: fiks;
Add CSS premye prefiksè navigatè a:
-webkit-background-size: kouvri;
-moz-background-size: kouvri;
-o-background-size: kouvri;
Lè sa a, ajoute pwopriyete a CSS:
background-gwosè: kouvri;
Sèvi ak imaj diferan ki kostim Variant Aparèy
Pandan ke konsepsyon reponn pou yon Desktop oswa yon eksperyans laptop enpòtan, varyete nan aparèy ki ka gen aksè entènèt la grandi anpil, ak yon pi gwo varyete gwosè ekran vini ak sa.
Kòm deja mansyone, chaje yon imaj gwo background anpil reponn sou yon smartphone, pou egzanp, se pa yon konsepsyon efikas oswa Pleasant-konsyan.
Aprann kijan ou ka itilize demann medya yo sèvi imaj ki pral apwopriye nan aparèy yo pral parèt sou, ak plis amelyore konpatibilite sit entènèt ou a ak aparèy mobil.
Original atik pa Jennfier Krynin. Edited pa Jeremy Girard 9/12/17