Ķermeņa fona attēli ir viegli izdarīti

html

Jauka funkcija, kuru atradīsit daudzās vietnēs, ir tā, ka centrālais satura apgabals, šķiet, pārklāj lapu ar aizēnojuma ēnu. Tā faktiski ir diezgan vienkārša metode, kā padarīt jūsu emuāru jauku (vai citas vietnes) izskatu ar vienu fona attēlu.

Kā tas tiek darīts?

  1. Izdomājiet, cik plašs ir jūsu saturs. Piemērs: 750 pikseļi.
  2. Veidojiet attēlu savā ilustrācijas lietojumprogrammā (es izmantoju Illustrator), kas ir platāks nekā satura apgabals. Piemērs: 800 pikseļi.
  3. Iestatiet attēla fona fonu, kuru vēlaties ievietot katrā emuāra pusē.
  4. Pievienojiet baltu apgabalu virs fona.
  5. Uzklājiet ēnu uz baltā reģiona, kas izspiež no abām reģiona pusēm.
  6. Iestatiet apgriešanas laukuma platumu par 1 pikseļu augstumā. Tas padarīs attēlu lejupielādējamu jauku un kompaktu ātrai renderēšanai.
  7. Izejiet attēlu.

Lūk, kā es to izveidoju, izmantojot Illustrator (ņemiet vērā, ka man ir daudz augstāka kultūraugu platība ... tas ir tikai tāpēc, lai jūs varētu redzēt, ko es daru):
Fons ar Illustrator

Šeit ir piemērs tam, kā izeja izskatīsies ar fona attēlu:
Fona attēla piemērs

Lūk, kā attēlu lietot, izmantojot ķermeņa stila tagu CSS fails.

fons: # B2B2B2 URL ('images / bg.gif') atkārtota-y centrs;

Šeit ir fona stila taga sadalīšana:

  • # B2B2B2 - iestata lapas kopējo fona krāsu. Šajā piemērā tas ir pelēks, lai tas atbilstu pelēkajam uz fona attēla.
  • url ('images / bg.gif') - iestata fona attēlu, kuru vēlaties izmantot.
  • atkārtot-y - iestata attēlu atkārtot uz y ass. Tātad fona attēls atkārtosies no lapas augšdaļas līdz apakšai.
  • centrs - iestata attēlu lapas centrā.

Jauki un viegli ... viens attēls, viens stila tags!

2 Komentāri

  1. 1
  2. 2

Ko jūs domājat?

Šī vietne izmanto Akismet, lai samazinātu surogātpastu. Uzziniet, kā tiek apstrādāts jūsu komentārs.