Briedgebiet site: hoe om de eftergrûn foto html

In protte begjinnende web foarmjouwers, allinne te ferdjipje har yn it wêzen fan 'e skepping fan' e siden, faak ôffregen hoe't te dwaan html eftergrûn ôfbylding. En as guon fan harren kin omgean mei dit probleem, it is noch altyd in probleem oan 'e tiid fan stretching de hiele breedte fan it byld op' e monitor. Tagelyk soe ik graach sjen op de site wurde werjûn identically op alle browsers, dus dat moat wiermeitsje de easken fan krús-browser. Jo kinne de eftergrûn yn twa manieren: troch it gebrûk fan HTML tags en CSS stilen. Elk foar himsels kiest de bêste opsje. Fansels, CSS styl is folle mear handiger, omdat syn koade wurdt opslein yn in aparte triem en net nimme ekstra sprekkers yn 'e wichtichste side tags, mar earst lit ús Betink in ienfâldige metoade foar it ynstallearjen fan de ôfbylding op' e eftergrûn fan 'e side.

Basis HTML tags te meitsjen op de eftergrûn

Sa, wy gean nei de fraach hoe't om de eftergrûn ôfbylding yn html op it skerm. Om te sjen moaie site, jim moatte begripe men earder wichtige detail: it is genôch krekt te meitsje in kleur ferin eftergrûn of fervje it in fêste kleur, mar as jo moatte ynfoegje de eftergrûn ôfbylding, dan sil net oprekke de folle breedte fan de monitor. It byld wie oarspronklik nedich te pakken of meitsje dyn eigen design mei dizze ferlingde, wêryn jo werjaan side fan 'e side. Allinnich at de eftergrûn ôfbylding is klear, sleep it yn in map mei de namme «Images». Yn it, wy sille opslaan alle brûkte ôfbyldings, animaasjes en oare grafyske triemmen. Dizze map moat wurde leit yn de haadtafel mei al jo html triemmen. No kinne jo op en om de koade. Der binne ferskate opsjes foar skriuwen koade, dêr't de eftergrûn sil feroarje de foto.

1. Skriuw tag skaaimerk.
2. Troch CSS styl yn de HTML-koade.
3. Skriuw CSS styles yn in aparte triem.

Lykas yn it HTML om de eftergrûn ôfbylding, jo beslisse, mar ik soe graach sizze in pear wurden oer hoe't it soe wêze de meast optimaal. De earste metoade is troch it skriuwen fia in tag attribút hat lang west ferâldere. De twadde opsje is brûkt hiel komselden, omdat it docht bliken dat in soad deselde koade. In tredde opsje is it meast foarkommende en effektyf. Hjir binne foarbylden fan HTML tags:

1. De earste opname metoade fia tag attribút (lichem) yn index.htm triem. It wurdt opslein yn dizze foarm: (body background = "folder_name / Nazvanie_kartinki.rasshirenie") (/ lichem). Dat is, as wy noch in foto mei de titel «Picture» en útwreiding JPG, en de map wy neamd «Images», dan de HTML-koade ynfier sil der sa útsjen: (body background = "Ofbyldings / Picture.jpg") ... (/ lichem) .
2. De twadde metoade giet it om it opnimmen fan in CSS styl, mar it is skreaun yn itselde triem mei de namme index.htm. (Body style = "background: url ( '../ Images / Picture.jpg')").
3. De tredde wize fan opname is makke yn twa bestannen. It dokumint mei de namme index.htm tag (holle) wurdt skreaun sa'n line: (haad) (link rel = "stylesheet" type = "text / css" href = "http: // site / artikel / 193110 /% D0% 9f % D1% 83% D1% 82% D1% 8C_% D0% BA CSS_faylu ") (/ head). In triem neamd style.css styl al skriuwe: body {background: url (Images / Picture.jpg ')}.

Lykas yn it HTML om de eftergrûn ôfbylding, wy begripe. No moatst út te finen hoe te oprekke it byld oer de breedte fan it hiele skerm.

Manieren om stretch de eftergrûn ôfbylding oan de breedte fan it finster

Wy fertsjintwurdigje ús skerm yn 'e foarm fan in persintaazje. It docht bliken dat de hiele breedte en de lingte fan it skerm sil wêze 100% × 100%. Wy moatte oprekke de ôfbylding nei dizze breedte. Taheakje oan it ôfbyldingstriem opname style.css line dy't sil oprekke it byld oer de hiele breedte en de lingte fan de monitor. Lyk as biskreaun stiet yn CSS styl? It is simpel!

body

{

background: url (Images / Picture.jpg ')

background-size: 100%; / * Dit berjocht is geskikt foar de measte moderne blêders * /

}

Sa we betocht hoe't om in foto eftergrûn yn html op it skerm. Der is ek in metoade fan opnimmen yn de index.htm triem. Hoewol't dizze metoade en ferâldere, mar foar begjinners is it nedich te witten en begripen. De tag (kop) (style) div {eftergrûn-size: cover; } (/ Style) (/ holle), dit rekord betsjut dat wy Reservear romte foar in spesjale ienheid foar de eftergrûn, dat sil pleatst oer de hiele breedte fan it finster. Wy hawwe sjoen as twa manieren, hoe meitsje in eftergrûn foto html site, sadat de ôfbylding wurdt spand om de folsleine breedte fan it skerm yn ien fan 'e moderne browsers.

Hoe te meitsje in fêste eftergrûn

As jo beslute te brûken in byld as de eftergrûn fan 'e takomstige web boarne, dan jim krekt nedich om te witten hoe te meitsje it fêst, sa, dat it is net spand lang en net te bedjerren de estetyske uterlik. Gewoan troch mei it brûken fan HTML-koade te registrearjen in lytse oanfolling. Jo moatte nei triem style.css te foegjen in sin nei eftergrûn: url (Images / Picture.jpg ') fixed; of ynstee tafoege nei de puntkomma aparte line - posysje: fêst. Sa, dyn wallpaper wurdt fêst. Tidens scrolling ynhâld op 'e side, dan silst sjen dat tekst linen wurde bewegend, mar de eftergrûn bliuwt yn plak. Dus jim learden hoe't te dwaan html eftergrûnôfbylding, yn ferskate manieren.

It wurkjen mei Tafels in HTML

In protte sûnder ûnderfining web ûntwikkelers, konfrontearre mei tafels en blokken, faak net begripe hoe te meitsjen html image eftergrûn tafel. Lykas alle teams HTML en CSS stilen, it web programmeartaal is frij simpel. En de oplossing fan dit probleem is te skriuwen in pear rigels fan de koade. Jo moatte al witte dat it skriuwen fan in tafel fan rigen en kolommen, respektivelik, lykas oanjûn troch de tags (tr) en (td). Om 'e eftergrûn fan' e tafel yn 'e foarm fan in byld, is it nedich om te foegjen oan de tag (tabel), (tr) of (td) in ienfâldige sin mei ferwizing nei de referinsje ôfbylding: background = URL foto. Foar de dúdlikens, wy jouwe in pear foarbylden.

Tabel mei in foto yn stee fan de eftergrûn: HTML examples

Tekenje in 2x3 tafel en meitsje it de eftergrûn ôfbylding opslein yn de map "Ofbyldings": (tabel background = "Ofbyldings / Picture.jpg") (tr) (td) 1 (/ td) (td) 2 (/ td) (td) 3) (/ td) (/ tr) (tr) (td) 4 (/ td) (td) 5 (/ td) (td) 6 (/ td) (/ tr) (/ tabel). Sa ús tafel wurdt tekene yn de eftergrûn fan 'e foto.

No lûke deselde plaat maten fan 2x3, mar ynfoegje in foto yn 'e kolommen telden 1, 4, 5 en 6. (tabel) (tr) (td eftergrûn = "Ofbyldings / Picture.jpg") 1 (/ td) (td) 2 (/ td) (td) 3 (/ td) (/ tr) (tr) (td eftergrûn = "Ofbyldings / Picture.jpg") 4 (/ td) (td eftergrûn = "Ofbyldings / Picture.jpg") 5 ( / td) (td eftergrûn = "Ofbyldings / Picture.jpg") 6 (/ td) (/ tr) (/ tabel). Nei it sjen kinne wy sjen dat de eftergrûn ferskynt allinnich yn dy sellen dêr't wy registrearre, en net de hiele tafel.

Cross-browser Kompatibilität site

Der is sa'n ding as in cross-browser Kompatibilität web boarne. Dat betsjut dat jo side wurdt likegoed werjûn yn ferskillende soarten en ferzjes fan browsers. It moat wêze HTML koade en CSS stilen te passen in needsaaklike browsers. Boppedat, yn 'e moderne tiid van smartphones, in protte web ûntwikkelaars besykje te meitsjen plakken en oanpast foar mobyl ferzje en in kompjûter sjen.