Mga Hulagway sa Background sa Lawas nga Dali Nahimo

html

Usa ka nindot nga bahin inyong makita sa daghang mga dapit mao ang dapit diin ang sentro sulod nga dapit makita sa upan sa panid uban sa usa ka tinulo landong sa luyo niini. Kini tinuod nga usa ka minatarong, sa maayohon yano nga pamaagi sa paghimo sa imong blog-aw nindot (o sa ubang mga website) uban sa usa ka single nga larawan background.

Giunsa kini nahimo?

  1. Hunahunaa kung unsa kalapad ang imong sulud. Pananglitan: 750px.
  2. Pagtukod sa usa ka larawan diha sa inyong ilustrasyon application (ko sa paggamit sa illustrator) mas lapad pa kay sa maong dapit sulod. Pananglitan: 800px.
  3. Itakda ang background sa imahe sa background nga gusto nimong maangkon sa matag kilid sa blog.
  4. Pagdugang usa ka puti nga rehiyon sa background.
  5. Ibutang ang usa ka landong sa mga puti nga rehiyon nga extrudes gikan sa bisan asa nga bahin sa rehiyon.
  6. Ibutang ang lugar sa tanum nga gilapdon sa 1 pixel ang gitas-on. Himuon niini ang imahe aron ma-download ang maayo ug compact alang sa dali nga pag-render.
  7. Pagpagawas sa imahe.

Ania ang paagi nga ako nagtukod niini sa paggamit sa illustrator (mubo nga sulat nga ako ang crop dapit daghan nga mas taas ... nga lang mao nga kamo makakita kon unsa ang akong gibuhat):
Background uban sa Illustrator

Ania ang usa ka pananglitan kung giunsa ang hitsura sa output nga adunay background nga imahe:
Pananglitan sa Hulagway sa Background

Ania kung giunsa ang pag-apply sa imahe gamit ang imong style style tag sa imong CSS File.

background: # B2B2B2 url ( 'larawan / bg.gif') balik-y center;

Ania ang us aka pagbulag sa tag sa estilo sa background:

  • # B2B2B2 - nagtakda sa kinatibuk-ang kolor sa background sa panid. Sa kini nga pananglitan, abohon kini aron mapares ang abuhon sa background nga imahe.
  • url ( 'mga larawan / bg.gif') - nagtakda sa larawan background nga gusto nimong paggamit.
  • balik-y - gitakda ang imahe aron mabalik sa y-axis. Mao nga ang imahe sa background magbalikbalik gikan sa taas hangtod sa ilawom sa panid.
  • sentro - gibutang ang imahe sa butnga sa panid.

Maayo ug dali… usa ka imahe, us aka style tag!

2 Comments

  1. 1
  2. 2

Unsay imong hunahuna?

Kini nga site naggamit sa Akismet sa pagpakunhod sa spam. Hibal-i kon giunsa ang pagproseso sa datos sa imong komento.