Nes site: hoe om die agtergrond prentjie te maak html

Baie beginner web ontwerpers, net om te delf in die kern van die skepping van terreine, dikwels wonder hoe om beeld html agtergrond doen. En as sommige van hulle kan gaan met hierdie probleem, is dit steeds 'n probleem by die tyd van strek die hele breedte van die beeld op die monitor. Terselfdertyd wil ek die webwerf is identies vertoon op alle blaaiers sien, so dit moet voldoen aan die vereistes van kruis-leser. Jy kan die agtergrond stel in twee maniere: deur die gebruik van HTML tags en CSS style. Elk vir homself kies die beste opsie. Natuurlik, CSS style is baie meer gerieflik, want sy kode gestoor word in 'n aparte lêer en neem nie ekstra sprekers in tags die hoof webwerf, maar eers laat ons kyk na 'n eenvoudige metode vir die installering van die beeld op die agtergrond van die site.

Basiese HTML tags op die agtergrond te skep

So, gaan ons na die vraag van hoe om die agtergrond beeld maak in html op die skerm. Ten einde 'n pragtige terrein kyk, moet jy een eerder belangrike detail verstaan: dit is genoeg om net 'n helling agtergrond maak of verf dit 'n soliede kleur, maar as jy nodig het om die agtergrond beeld te voeg, sal dit nie rek die volle breedte van die monitor. Die beeld was oorspronklik nodig om af te haal of maak jou eie ontwerp met hierdie uitbreiding, waarin jy sal bladsy van die webwerf vertoon. Net vir die agtergrond beeld is gereed, sleep dit in 'n gids met die naam «Images». In dit, sal ons al die gebruikte beelde, animasie en ander grafiese lêers te stoor. Hierdie gids moet geleë wees in die hoofdmap met al jou html lêers. Nou kan jy beweeg op en om die kode. Daar is verskeie opsies om te skryf kode, waardeur die agtergrond die prentjie sal verander.

1. Skryf tag kenmerk.
2. Deur CSS style in die HTML-kode.
3. Skryf CSS style in 'n aparte lêer.

Soos in die HTML om die agtergrond beeld maak, jy besluit, maar ek wil graag 'n paar woorde oor hoe dit die mees optimale sou wees sê. Die eerste metode is deur die skryf van deur 'n tag kenmerk is al lank verouderd. Die tweede opsie is baie selde gebruik, omdat dit blyk dat 'n groot deel van die dieselfde kode. 'N Derde opsie is die mees algemene en effektiewe. Hier is voorbeelde van HTML tags:

1. Die eerste metode opname deur tag kenmerk (liggaam) in index.htm lêer. Dit is gestoor in die vorm: (liggaam agtergrond = "FOLDER_NAME / Nazvanie_kartinki.rasshirenie") (/ liggaam). Dit wil sê, as ons 'n prentjie met die titel «Picture» en uitbreiding JPG, en die gids ons genoem «Images», dan die HTML-kode inskrywing sal lyk: (liggaam agtergrond = "Images / Picture.jpg") ... (/ liggaam) .
2. Die tweede metode behels opname van 'n CSS style, maar daar is geskrywe in dieselfde lêer met die naam index.htm. (Body style = "agtergrond: url (" ../ Images / Picture.jpg ') ").
3. Die derde metode van opname gemaak in twee lêers. Die dokument met die naam index.htm tag (kop) is geskryf soos 'n lyn: (kop) (skakel rel = "stylesheet" type = "text / css" href = "http: // site / artikel / 193110 /% D0% 9F % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ kop). 'N lêer genaamd style.css styl reeds skryf: liggaam {agtergrond: url (Images / Picture.jpg')}.

Soos in die HTML om die agtergrond beeld maak, verstaan ons. Nou moet jy om uit te vind hoe om die beeld te rek oor die breedte van die hele skerm.

Maniere om die agtergrond beeld te rek tot die breedte van die venster

Ons verteenwoordig ons skerm in die vorm van 'n persentasie. Dit blyk dat die hele breedte en lengte van die skerm 100% sal wees × 100%. Ons moet die beeld rek om hierdie breedte. Voeg by die beeld-lêer opname style.css lyn wat die beeld sal strek oor die hele breedte en lengte van die monitor. Soos geskrywe is: in CSS style? Dit is eenvoudig!

liggaam

{

agtergrond: url (Images / Picture.jpg ')

agtergrond-grootte: 100%; / * Hierdie pos is geskik vir die meeste moderne blaaiers * /

}

Sodat ons uitgepluis het hoe om 'n foto agtergrond in html op die skerm te maak. Daar is ook 'n metode van opname in die index.htm lêer. Alhoewel hierdie metode en verouderde, maar vir beginners is dit nodig om te weet en te verstaan. Die tag (hoof) (styl) div {agtergrond-grootte: cover; } (/ Style) (/ kop), hierdie rekord beteken dat ons ken 'n spesiale eenheid vir die agtergrond, wat oor die hele breedte van die venster sal wees geposisioneer. Ons het twee maniere, hoe om 'n agtergrond prentjie html site, sodat die beeld is uitgestrek na die hele breedte van die skerm in enige van die moderne blaaiers beskou.

Hoe om 'n vaste agtergrond maak

As jy besluit om 'n prentjie te gebruik as die agtergrond van die toekoms web hulpbron, dan moet jy net nodig het om te weet hoe om dit te laat vaste, sodat dit nie lank uitgestrek en het die estetiese voorkoms nie bederf nie. Eenvoudig deur die gebruik van HTML-kode 'n klein toevoeging registreer. Jy moet style.css lêer na 'n frase nadat agtergrond by te voeg: url (Images / Picture.jpg ') vas te stel; of plaas bygevoeg na die kommapunt aparte lyn - posisie: vaste. Dus, sal jou agtergrond vas te stel. Tydens blaai inhoud op die webwerf, sal jy daardie teks lyne beweeg sien, maar die agtergrond bly in plek. Sodat jy geleer hoe om beeld html agtergrond doen, op verskeie maniere.

Werk met tabelle in HTML

Baie onervare web ontwikkelaars, gekonfronteer met tafels en blokke, dikwels nie verstaan hoe om beeld html agtergrond tafel maak. Soos alle spanne HTML en CSS style, die webprogrammeringstaal is redelik eenvoudig. En die oplossing vir hierdie probleem is om 'n paar van die reëls van die kode te skryf. Jy moet reeds weet dat die skryf van 'n tafel van rye en kolomme, onderskeidelik, soos aangedui deur die etikette (tr) en (td). Om die agtergrond van die tafel in die vorm van 'n beeld maak, is dit nodig om by te voeg tot die tag (tafel), (tr) of (td) 'n eenvoudige frase met verwysing beeld die verwysing na: agtergrond = URL foto's. Vir duidelikheid, gee ons 'n paar voorbeelde.

Tafel met 'n foto plaas van die agtergrond: HTML voorbeelde

Trek 'n 2x3 tafel en maak dit die agtergrond beeld gestoor in die gids "Images": (tafel agtergrond = "Images / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ table). So ons tafel sal in die agtergrond van die foto word getrek.

Trek nou dieselfde bord groottes van 2x3, maar voeg 'n prentjie in die kolomme genommer 1, 4, 5 en 6. (tafel) (tr) (td agtergrond = "Images / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td agtergrond = "Images / Picture.jpg") 4 (/ td) (td agtergrond = "Images / Picture.jpg") 5 ( / td) (td agtergrond = "Images / Picture.jpg") 6 (/ td) (/ tr) (/ table). Na die lees van ons kan sien dat die agtergrond verskyn slegs in die selle in wat ons geregistreer, en nie die hele tafel.

Kruis-leser verenigbaarheid webwerf

Daar is so 'n ding soos 'n kruis-leser verenigbaarheid web hulpbron. Dit beteken dat jou site is ewe goed vertoon in verskillende tipes en weergawes van webblaaiers. Dit moet wees HTML-kode en CSS style om 'n noodsaaklike blaaier aanpas. Verder, in die moderne era van smart phones, baie web ontwikkelaars probeer om webwerwe te skep en aangepas vir mobiele weergawe en 'n rekenaar kyk.