Liggaam agtergrond beelde maklik gedoen
'N Goeie kenmerk wat u op baie webwerwe sal vind, is waar die middelinhoudsgebied die bladsy met 'n druppel skaduwee daaragter bedek. Dit is eintlik 'n redelike eenvoudige metode om u blog mooi te laat lyk (of 'n ander webwerf) met 'n enkele agtergrondfoto.
Hoe word dit gedoen?
- Ontdek hoe breed u inhoud is. Voorbeeld: 750px.
- Bou 'n prentjie in u illustrasie-toepassing (ek gebruik Illustrator) wyer as die inhoudsarea. Voorbeeld: 800px.
- Stel die agtergrond van die prent op die agtergrond wat u aan elke kant van die blog wil hê.
- Voeg 'n wit streek op die agtergrond by.
- Wend 'n skaduwee aan op die wit streek wat aan weerskante van die streek uitdruk.
- Stel die gewasoppervlakte die breedte met 1 pixel in hoogte. Dit sal die aflaai van die prentjie mooi en kompak maak vir vinnige weergawe.
- Voer die beeld uit.
Hier is hoe ek dit met Illustrator gebou het (let op dat ek die gewasoppervlak baie groter is ... dit is net sodat u kan sien wat ek doen):
Hier is 'n voorbeeld van hoe die uitvoer met die agtergrondbeeld sou lyk:
Hier is hoe u die beeld kan toepas met behulp van u liggaamstylplaatjie in u
CSS lêer.agtergrond: # B2B2B2 url ('images / bg.gif') herhalingsentrum;
Hier is 'n disseksie van die agtergrondstylplaatjie:
- # B2B2B2 - stel die algehele agtergrondkleur van die bladsy in. In hierdie voorbeeld is dit grys om die grys op die agtergrondprent te pas.
- url ('images / bg.gif') - stel die agtergrondprent in wat u wil gebruik.
- herhaal-y - stel die beeld in om op die y-as te herhaal. Die agtergrondbeeld sal dus van bo tot onder op die bladsy herhaal word.
- middel - stel die prentjie in die middel van die bladsy.
Mooi en maklik ... een prentjie, een stylkaartjie!