Nuttige wenke

Hoe om vinnig en maklik 'n agtergrondfoto te maak met behulp van html

Pin
Send
Share
Send
Send


Enige kamer sal baie beter lyk as dit met 'n duur Persiese tapyt bedek is. So, wat is die erger van u webwerf? Miskien het die tyd aangebreek om sy vloer met 'n duur, handgemaakte paleis te “bedek”. Ons sal in meer besonderhede ondersoek hoe u 'n agtergrond vir die webwerf kan maak:

Beeldkeuse

Ek wil graag 'n beeld kies. Om die agtergrond op die bladsy meer egalig en mooier te laat lyk, en u nie hoef te sukkel met die afmetings en belyning nie. Ek stel voor dat u dadelik naatlose tekstuur soek. Wat is dit?

Ongelukkig is dit nie moontlik om 'n beeld in HTML na die volledige skerm uit te rek nie. Die foto word in volle grootte gebruik. As die foto klein is, sal dit die hele gebied baan, soos in die skermkiekie hieronder. Om die prentjie te rek, moet u 'n addisionele css-dokument skep, en dit sal nie werk nie.

Alhoewel, het u die geleentheid om die stelsel reg te kry. Gebruik dit om Photoshop te maak en die grootte van die prentjie te verander na die breedte van die skerm (1280x720). Alhoewel, in hierdie geval, wanneer u afrol, sal die foto 'n ander een vervang.

'N Veel beter opsie as u nie css wil gebruik nie, is om naatlose teksture te gebruik. Hulle sien geen gewrigte nie. Dit is soos muurpapier of moderne teëls in die ontwerp. Die een vervang die ander en geen gewrigte is sigbaar nie.

As u belangstel in gratis beelde en die gebrek aan wetlike gevolge vir die gebruik daarvan, raai ek u aan om op die webwerf te soek Pixabay.com.

Laat ons nou met die kode werk. Ek moet dadelik sê dat ons nou met html werk, dit wil sê, ons verander die prentjie nie vir die hele webwerf nie, maar slegs vir een spesifieke bladsy waarvoor die kode geskryf word. As u belangstel in veranderinge aan die hele bron, moet u kode met behulp van css, maar later later.

Sodat u in 'n kladblok kan werk, verkies ek NotePad ++. Dit is baie meer gerieflik om daarin te werk: die kode word vir u bygevoeg; die etikette word uitgelig. Die program is gratis en weeg ongeveer 3 MB. Beveel sterk aan, veral as u 'n beginner is.

So in die tag liggaam moet u 'n kenmerk byvoeg agtergrond en spesifiseer 'n skakel na die prent waarvandaan die foto geneem sal word. Hier is hoe dit in die program lyk.

U kan eenvoudig die kladblok oopmaak en hierdie kode kopieer. In aanhalingstekens, plaas 'n skakel na die prentjie waarvan u hou.

Beeld as bladsyagtergrond - HTML

Oorweeg eerstens die metode om die agtergrondprent op die webwerf op te stel deur die kenmerk te gebruik agtergrond tag liggaam:

Soos in die voorbeeld hierbo, word dit ook aanbeveel om die agtergrondkleur aan te dui (dit sal op die webwerf vertoon word wanneer die bladsy laai), wat gekombineer word met die agtergrondprent en 'n kontras met die teks op die webwerf skep. As u byvoorbeeld die wit kleur van die teks op die webwerf gebruik, moet u 'n donker agtergrondkleur spesifiseer en 'n donker agtergrondprent instel. In hierdie geval is die teks maklik om te lees.

let wel: Dit word aanbeveel dat u die agtergrondprent en agtergrondkleur instel wat nie HTML gebruik nie, maar CSS gebruik. In hierdie geval is die kode geldig en meer korrek.

Beeld as bladsyagtergrond - CSS

In CSS kan die agtergrondkleur en agtergrondprentjie met een eienskap opgestel word. agtergrond:

Hier met behulp van die eiendom agtergrond-aanhangsel bladsy agtergrond is vasgestel, en die gebruik van die eiendom agtergrond-repeat horisontale herhaling van die beeld is ingestel. Maar dit is die moeite werd om te oorweeg dat die agtergrondprent goed aan die kante moet "stik".

Gebruik die eiendom as u die agtergrondprent tot die volle grootte van die blaaiervenster wil rek agtergrondgrootte: 100%,

In die Nubex-werfbouer kan u vir enige webwerf 'n groot beeld as agtergrond gebruik en dit regstel.

Agtergrond vir die webwerf

Dit gebeur dat die ou werfontwerp al vervelig is. En ek wil iets nuuts en lekker hê. En die nuwe ontwerp sal so wees as jy dit self kook.

Maar om die hele ontwerp van die bron self heeltemal te verander, is ondankbaar. En nie almal het hul hande geslyp onder hierdie onderneming nie. Daarom is dit die maklikste om die ou sjabloon te verfris deur die agtergrondkleur van die bron of die agtergrondprent daarvan te verander.

Daar is verskillende maniere om die agtergrond op die webwerf te verander. Gebruik dit om CSS of html te gebruik. Maar baie van die eienskappe om met die agtergrond te werk, het dieselfde naam en toepassingsmetodologie in hierdie webtegnologieë.

Basiese beginsels van html

U kan verskillende elemente as agtergrond gebruik:

  • kleur
  • Agtergrondprent
  • Tekstuurbeeld.

Ons sal elkeen meer in detail bespreek.

Om die agtergrondkleur vir die webwerf in te stel, word die agtergrondkleureienskap van die stylkenmerkstyl gebruik. Dit wil sê, om die primêre kleur vir 'n webblad in te stel, moet u dit binne die tag registreer. Byvoorbeeld:

Html ondersteun slegs 16 sleutelwoorde vir kleur. Hier is 'n paar van hulle: wit, rooi, blou, swart, geel en ander.

Daarom is dit beter om die heksadesimale formaat of RGB te gebruik om die agtergrond vir die HTML-webwerf te bepaal.

Benewens die keuse van kleure, is ander instellings ook beskikbaar. As die agtergrondkleur-eienskap op deursigtig is, sal die agtergrond van die bladsy deursigtig word. Hierdie waarde word standaard aan hierdie eiendom toegeken.

Oorweeg nou die moontlikhede van die hiperteks vir die opstel van die agtergrond vir die webwerf. Dit kan gedoen word met behulp van die agtergrond-beeld-eienskap.

Gestel ons ontwikkel 'n webwerf oor poësie, en ons moet 'n Pegasus-beeld as substraat gebruik. Die gevleuelde perd sal die vryheid van die kreatiewe denke van die digter beliggaam!

  • herhaal-x - herhaal die agtergrondprentjie horisontaal,
  • herhaal-y - vertikaal,
  • herhaal - op beide asse,
  • geen herhaling nie - herhaling is verbode.

Van hierdie opsies is ons geïnteresseerd in laasgenoemde. Voordat ons die agtergrond van die webwerf verander, gebruik ons ​​dit in ons kode:

  • Sleutelwoord (bo, onder, middel, links, regs),
  • Persentasie - die aftelling begin vanaf die boonste linkerhoek,
  • In meeteenhede (pixels).

Ons gebruik die eenvoudigste sentreringsopsie:

Dit gebeur dat u die posisie van die foto moet regstel wanneer u blaai. Gebruik dus die spesiale eienskap vir die agtergrond-aanhegsel voordat u 'n prentjie maak van die agtergrond van die webwerf. Die waardes wat hy aanvaar is:


  • boek,
  • vaste.

Ons het die laaste waarde nodig. Nou sal die kode van ons voorbeeld so lyk: [/ HTML]

Textural site agtergrond

In die eerste voorbeeld gebruik ons ​​'n groot en pragtige woestynlandskap vir die agtergrond. Maar vir sulke skoonheid moet u ten volle betaal. Die gewig van 'n hoë kwaliteit beeld kan verskillende megagrepe bereik.

Hierdie bedrag beïnvloed nie die bladsy-laaispoed van die blaaier met 'n hoëspoed-internetverbinding nie. Maar wat van die mobiele internet? As u 'n paar meter aflaai, sal dit baie tyd verg?

Al hierdie probleme word met behulp van 'n tekstuuragtergrond opgelos. Dit gebruik 'n klein beeld as 'n tekstuurpatroon. Al word dit baie keer herhaal, word die tekening slegs een keer gelaai.

Gaan na Photoshop om 'n donker agtergrond vir die webwerf te skep, en skep 'n beeld in die vorm van 'n strook van 1200 pixels lank en 15 pixels breed. Wend dan 'n eenvoudige swart en wit gradiënt aan en verbind die resulterende tekstuur aan die webwerfblad:

Ter wille van die duidelikheid het ons teks bygevoeg en die kleur daarvan met behulp van die kleureienskap gestel. Hier is wat gebeur het:

CSS gereedskap

Al die eienskappe wat hierbo beskryf word, is ook van toepassing op stilstaande blaaie. Skep die css-agtergrond deur die kode vir een van ons vorige voorbeelde te herskryf:

Die resultaat sal soortgelyk wees.

Wel, hier het ons al die opsies ondersoek om die agtergrond op die webwerf te verander. Nou bly dit net om 'n tekening van die toekomstige tapyt te maak en dit op die bladsye van u bron te versprei. Maar dit hang al van u af.

Pin
Send
Share
Send
Send