Mga Larawan sa Background ng Katawan na Madaling Ginawa

html

Ang isang magandang tampok na mahahanap mo sa maraming mga site ay kung saan lilitaw ang lugar ng gitna ng nilalaman upang mai-overlay ang pahina na may isang drop shade sa likuran nito. Ito ay talagang isang simpleng pamamaraan upang gawing maganda ang iyong blog (o iba pang website) na may isang solong imahe sa background.

Paano ito nagawa?

  1. Alamin kung gaano kalawak ang iyong nilalaman. Halimbawa: 750px.
  2. Bumuo ng isang imahe sa iyong application ng paglalarawan (Gumagamit ako ng Illustrator) na mas malawak kaysa sa lugar ng nilalaman. Halimbawa: 800px.
  3. Itakda ang background ng imahe sa background na nais mong magkaroon sa bawat panig ng blog.
  4. Magdagdag ng isang puting rehiyon sa background.
  5. Mag-apply ng anino sa puting rehiyon na nagpapalabas mula sa magkabilang panig ng rehiyon.
  6. Itakda ang lugar ng pag-crop ng lapad ng 1 pixel sa taas. Gagawa ito ng imahe upang mag-download ng maganda at compact para sa mabilis na pag-render.
  7. I-output ang imahe.

Narito kung paano ko ito itinayo gamit ang Illustrator (tandaan na mayroon akong lugar ng ani na mas matangkad ... iyan lamang upang makita mo ang ginagawa ko):
Background sa Illustrator

Narito ang isang halimbawa kung paano magmumula ang output na may larawan sa background:
Halimbawa ng Larawan sa Background

Narito kung paano ilapat ang imahe gamit ang iyong style style tag sa iyong CSS file.

background: # B2B2B2 url ('mga imahe / bg.gif') ulitin-y center;

Narito ang isang dissection ng background style tag:

  • # B2B2B2 - itinakda ang pangkalahatang kulay ng background ng pahina. Sa halimbawang ito, kulay-abo na maitugma ang kulay-abo sa background na imahe.
  • url ('mga imahe / bg.gif') - Itinatakda ang larawan sa background na nais mong gamitin.
  • ulitin-y - itinakda ang imahe upang ulitin sa y-axis. Kaya't ang imahe ng background ay ulitin mula sa itaas hanggang sa ibaba ng pahina.
  • gitna - itinatakda ang imahe sa gitna ng pahina.

Maganda at madali ... isang imahe, isang style tag!

2 Comments

  1. 1
  2. 2

Ano sa tingin ninyo?

Ang site na ito ay gumagamit ng Akismet upang mabawasan ang spam. Alamin kung paano naproseso ang data ng iyong komento.