Kūno fono paveikslėliai lengvai padaryti

HTML

Puiki funkcija, kurią rasite daugelyje svetainių, yra ta, kad atrodo, kad centrinė turinio sritis uždengia puslapį su šešėliu už jo. Iš tikrųjų tai yra gana paprastas metodas, leidžiantis jūsų tinklaraščiui atrodyti gražiai (ar kitoje svetainėje) su vienu fono vaizdu.

Kaip tai daroma?

  1. Išsiaiškinkite, koks platus jūsų turinys. Pavyzdys: 750 taškų.
  2. Sukurkite iliustracijos programoje vaizdą (aš naudoju „Illustrator“), platesnį nei turinio sritis. Pavyzdys: 800 taškų.
  3. Nustatykite vaizdo foną į foną, kurį norite turėti kiekvienoje dienoraščio pusėje.
  4. Virš fono pridėkite baltą sritį.
  5. Užtepkite šešėlį ant baltojo regiono, kuris išsiskiria iš abiejų regiono pusių.
  6. Apkarpymo plotą nustatykite 1 taško aukščio pločiu. Tai padarys vaizdą gražų ir kompaktišką, kad būtų galima greitai pateikti.
  7. Išveskite vaizdą.

Štai kaip aš sukonstravau jį naudodamas „Illustrator“ (atkreipkite dėmesį, kad pasėlių plotas yra daug didesnis ... tai tik tam, kad pamatytumėte, ką darau):
Fonas su „Illustrator“

Štai pavyzdys, kaip išvestis atrodytų su fono vaizdu:
Fono paveikslėlio pavyzdys

Štai kaip pritaikyti vaizdą naudojant kūno stiliaus žymą CSS failas.

fonas: # B2B2B2 URL ('images / bg.gif') pakartokite-y centras;

Štai foninio stiliaus žymos atskyrimas:

  • # B2B2B2 - nustato bendrą puslapio fono spalvą. Šiame pavyzdyje pilka spalva sutampa su pilka fono paveikslėlyje.
  • url ('images / bg.gif') - nustato norimą naudoti fono paveikslėlį.
  • pakartoti-y - nustatomas vaizdas kartojamas y ašyje. Taigi fono vaizdas kartosis nuo puslapio viršaus iki apačios.
  • centras - nustato vaizdą puslapio centre.

Gražu ir lengva ... vienas vaizdas, viena stiliaus žyma!

2 komentarai

  1. 1
  2. 2

Ką manote?

Ši svetainė naudoja "Akismet", kad sumažintų šlamštą. Sužinokite, kaip apdorojamas jūsų komentaras.