A test háttérképei könnyedén elkészültek

Sok webhelyen megtalálható egy szép szolgáltatás, ahol a középső tartalmi terület úgy tűnik, hogy az oldalt egy árnyékkal borítja mögé. Valójában meglehetősen egyszerű módszer arra, hogy blogod (vagy más webhely) szép háttérképpé váljon.

Hogyan történik ez?

1. Találja ki, milyen széles a tartalma. Példa: 750 képpont.
2. Készítsen egy képet az illusztráció alkalmazásban (én az Illustrator programot használom), amely szélesebb, mint a tartalmi terület. Példa: 800 képpont.
3. Állítsa a kép hátterét a blog mindkét oldalán kívánt háttérre.
4. Fehér háttér hozzáadása a háttér fölé.
5. Alkalmazzon egy árnyékot a fehér régióra, amely a régió két oldaláról extrudál.
6. Állítsa be a vágási terület szélességét 1 pixel magasságban. Ezáltal a kép szép és kompakt lesz a gyors renderelés érdekében.
7. Kimeneti a képet.

Így készítettem el az Illustrator segítségével (vegye figyelembe, hogy a termésterület sokkal magasabb ... csak azért, hogy láthassa, mit csinálok):

Íme egy példa arra, hogyan nézne ki a kimenet a háttérképpel:

Az alábbiakban bemutatjuk, hogyan alkalmazható a kép a teststílus címkéjével CSS fájlt.

háttér: # B2B2B2 url ('images / bg.gif') ismétlés-y központ;

Itt van egy boncolás a háttérstílus címkéről:

• # B2B2B2 - beállítja az oldal teljes háttérszínét. Ebben a példában szürke a háttérkép szürke színével egyezni.
• url ('images / bg.gif') - beállítja a használni kívánt háttérképet.
• ismétlés-y - a képet úgy állítja be, hogy az ismétlődjön az y tengelyen. Tehát a háttérkép az oldal tetejétől lefelé fog ismétlődni.
• center - a képet az oldal közepére állítja.

Szép és egyszerű ... egy kép, egy stíluscímke!