Nidifikasyon sit: Ki jan yo fè foto a background html

Anpil Designers entènèt inisyasyon, sèlman nan fouye nan sans nan kreyasyon an nan sit, souvan mande ki jan fè imaj html jan nou koumanse. Men, si kèk nan yo ka fè fas ak pwoblèm sa a, li se toujou yon pwoblèm nan yon moman nan etann lajè a tout antye de imaj la sou pou kontwole a. An menm tan an mwen ta renmen wè sit la yo ap parèt idantik sou tout navigatè, se konsa li ta satisfè kondisyon yo nan kwa-navigatè. Ou ka mete background nan nan de fason: lè l sèvi avèk HTML Tags ak Styles CSS. Chak pou tèt li chwazi chwa ki pi bon. Natirèlman, style CSS se pi plis pratik, paske se kòd li yo ki estoke nan yon dosye separe epi pa pran ki pale natif anplis nan Tags sit prensipal la a, men premye kite nou konsidere yon metòd senp pou enstale imaj la sou background nan nan sit la.

Debaz HTML Tags yo kreye background nan

Se konsa, nou ale nan kesyon an pou konnen kijan pou fè imaj la background nan html sou ekran an. Yo nan lòd yo gade bèl sit, ou dwe konprann yon sèl detay olye enpòtan: li se ase jis fè yon background gradyan oswa penti li yon koulè solid, men si ou bezwen insert imaj la background, li pa pral detire lajè a plen nan pou kontwole a. Imaj la te orijinèlman nesesè yo ranmase oswa fè konsepsyon pwòp ou a ak sa a ekstansyon, nan ki w ap montre paj nan sit la. Se sèlman lè imaj la background se pare, trennen l 'nan yon katab rele «Imaj». Nan li, nou pral estoke tout imaj yo itilize, Animations ak lòt dosye grafik. katab Sa a ta dwe sitiye nan anyè a rasin ak tout dosye html ou yo. Koulye a, ou kapab deplase sou yo ak sou nan kòd la. Gen plizyè chwa pou kòd ekri, pa ki background nan pral chanje imaj la.

1. Ekri atribi tag.
2. Atravè style CSS nan kòd la HTML.
3. Ekri estil CSS nan yon dosye apa.

Kòm nan HTML nan fè imaj la background, ou deside, men mwen ta renmen di yon kèk mo sou li montre kouman li ta dwe pi optimal a. Metòd an premye se pa ekri a yon atribi tag ki depi lontan te demode. se dezyèm posiblite a te itilize trè raman, paske li sanble ke yon anpil nan kòd la menm. Yon opsyon twazyèm se pi komen an ak efikas. Isit la yo se egzanp nan Tags HTML:

1. Metòd la anrejistreman premye nan atribi tag (kò) nan dosye index.htm. Li se ki estoke nan fòm sa a: (jan nou koumanse kò = "folder_name / Nazvanie_kartinki.rasshirenie") (/ kò). Sa se, si nou gen yon foto ak tit la «Foto» ak ekstansyon JPG, ak dosye a nou yo te rele «Imaj», lè sa a antre nan HTML-Kòd pral gade tankou sa a: (jan nou koumanse kò = "Imaj / Picture.jpg") ... (/ kò) .
2. Metòd la dezyèm enplike nan anrejistreman yon style CSS, men sa ki te ekri nan dosye a menm ak index.htm nan non. (Kò kalite = "jan nou koumanse url ( '../ Imaj / Picture.jpg')").
3. Se metòd la twazyèm nan anrejistreman te fè nan de dosye. Se dokiman an épi mo klé Non index.htm (tèt) ekri tankou yon liy: (tèt) (lyen rel = "stylesheet" kalite = "tèks / css" href = "http: // sit / atik / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ tèt). Yon dosye rele style style.css deja ekri: kò {jan nou koumanse url (Imaj / Picture.jpg ')}.

Kòm nan HTML a fè imaj la background, nou konprann. Koulye a, ou bezwen konnen ki jan yo detire imaj la atravè lajè a nan ekran an tout antye.

Fason yo detire imaj la background a lajè a nan fennèt la

Nou reprezante ekran nou an nan fòm lan nan yon pousantaj. Li sanble ke lajè a tout antye ak longè nan ekran an pral 100% × 100%. Nou bezwen detire imaj la nan sa a lajè. Ajoute nan liy lan dosye imaj anrejistreman style.css ki pral detire imaj la sou lajè a tout antye ak longè pou kontwole a. Jan sa te ekri nan style CSS? Li nan senp!

kò

{

jan nou koumanse url (Imaj / Picture.jpg ')

jan nou koumanse-gwosè: 100%; / * Pòs sa a se apwopriye pou pi navigatè modèn * /

}

Se konsa, nou kalkile konnen kouman ou kapab fè yon jan nou koumanse foto nan html sou ekran an. Genyen tou se yon mwayen pou anrejistreman nan dosye a index.htm. Menm si metòd sa a ak demode, men pou débutan li se nesesè yo konnen epi konprann. tag (tèt) (style) div nan {background-taille: kouvèti; } (/ Style) (/ tèt), dosye sa a vle di ke nou asiyen yon inite espesyal pou background nan, ki pral positionné sou lajè a tout antye de fenèt la. Nou te konsidere kòm de fason yo fè sit html foto jan nou koumanse, se konsa ke se imaj la lonje nan lajè a tout antye de ekran an nan nenpòt nan navigatè yo modèn.

Ki jan yo fè yon background fiks

Si ou deside sèvi ak yon foto kòm background nan nan resous la sou sit nan lavni, Lè sa a, ou jis bezwen konnen ki jan yo fè l 'fiks, se konsa ke li pa lonje nan longè ak pa t' gate aparans nan ayestetik. Senpleman lè l sèvi avèk kòd HTML yo enskri yon adisyon piti. Ou bezwen ranpli style.css yo ajoute yon fraz apre jan nou koumanse url (Imaj / Picture.jpg ') fiks; oswa olye te ajoute apre pwenvigil separe liy - pozisyon nan: fiks yo. Se konsa, yo pral D 'ou dwe fiks yo. Pandan defile kontni sou sit la, ou pral wè ke tèks liy yo ap deplase, men jan nou koumanse a rete an plas. Se konsa, ou te aprann ki jan fè html imaj background, nan plizyè fason.

Travay ak Tablo nan HTML

Anpil devlopè entènèt san eksperyans, te fè fas ak tab ak blòk, souvan pa konprann ki jan fè tab imaj html jan nou koumanse. Tankou tout ekip HTML ak CSS Styles, lang nan pwogram entènèt se san patipri ki senp. Apre sa, solisyon an nan pwoblèm sa a se yo ekri yon pè nan liy nan kòd. Ou ta dwe deja konnen ke ekri yon tab nan ranje ak kolòn, respektivman, jan sa endike nan etikèt yo (tr) ak (td). Pou fè background nan nan tablo a nan fòm lan nan yon imaj, li nesesè pou ajoute pou tag nan (tab), (tr) oswa (Td) yon fraz senp ak referans nan imaj la referans: jan nou koumanse = foto URL. Pou klè, nou bay yon koup la egzanp.

Tab la avèk yon foto olye pou yo background nan: HTML egzanp

Trase yon tab 2x3, epi fè li imaj la background ki estoke nan katab "Imaj yo": (jan nou koumanse tab = "Imaj / Picture.jpg") (TR) (Td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tablo). Se konsa, pral tab nou an dwe desine nan background nan nan imaj la.

Koulye a, trase gwosè yo plak menm nan 2x3, men insert yon foto nan kolòn yo konte 1, 4, 5 ak 6. (tab) (tr) (td jan nou koumanse = "Imaj / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td jan nou koumanse = "Imaj / Picture.jpg") 4 (/ td) (td jan nou koumanse = "Imaj / Picture.jpg") 5 ( / td) (td jan nou koumanse = "Imaj / Picture.jpg") 6 (/ td) (/ tr) (/ tablo). Apre l ap gade nou ka wè ke jan nou koumanse a parèt sèlman nan selil sa yo nan ki nou anrejistre, epi yo pa tab la tout antye.

Kwa-navigatè konpatibilite sit

Gen se tankou yon bagay tankou yon kwa-navigatè resous sou sit konpatibilite. Sa vle di ke sit ou se egalman byen parèt nan diferan kalite ak vèsyon an navigatè. Li ta dwe HTML kòd ak CSS Styles yo Customize yon navigatè nesesè. Anplis, nan epòk la modèn nan telefòn entelijan, anpil devlopè entènèt yo ap eseye kreye sit ak adapte pou mobil vèsyon ak yon gade òdinatè.