Mga Hulagway sa Background sa Lawas nga Dali Nahimo

html

Ang usa ka matahum nga bahin nga makit-an nimo sa daghang mga site diin makita ang dapit sa kinatung-an nga sulud sa pagsapaw sa panid nga adunay drop shade sa likud niini. Sa tinuud usa kini ka yano nga pamaagi aron ang imong blog nindot tan-awon (o uban pang website) nga adunay us aka imahe sa 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.

Niini kung giunsa ko kini gihimo gamit ang Illustrator (timan-i nga adunay ako taas nga tanum nga ani… aron lang makita nimo kung 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 imahe / bg.gif') - nagtakda sa hulagway sa background nga gusto nimong gamiton.
  • 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.