Մարմնի ֆոնի պատկերները կատարվում են հեշտությամբ

HTML

Հաճելի առանձնահատկություն, որը դուք կգտնեք շատ կայքերում, այն է, երբ կենտրոնի բովանդակության տարածքը, կարծես, ծածկում է էջը, որի հետևում կա մի ստվերային ստվեր: Իրականում դա բավականին պարզ մեթոդ է `ձեր բլոգը գեղեցիկ (կամ այլ կայք) գեղեցիկ տեսք ունենալու համար` մեկ ֆոնային պատկերով:

Ինչպե՞ս է դա արվում:

  1. Պարզեք, թե որքան լայն է ձեր բովանդակությունը: Օրինակ ՝ 750 px:
  2. Պատկեր կառուցեք ձեր նկարազարդման հավելվածում (ես օգտագործում եմ Illustrator) ավելի լայն, քան բովանդակության տարածքը: Օրինակ ՝ 800 հատ:
  3. Պատկերի ֆոնը սահմանեք այն ֆոնի վրա, որը ցանկանում եք ունենալ բլոգի յուրաքանչյուր կողմում:
  4. Ֆոնի վրա ավելացրեք սպիտակ շրջան:
  5. Ստվեր կիրառեք սպիտակ շրջանի վրա, որը տարածվում է տարածաշրջանի երկու կողմից:
  6. Սահմանեք բերքի տարածքը լայնությունը 1 պիքսել բարձրության վրա: Սա կդարձնի պատկերը ներբեռնելու համար գեղեցիկ և կոմպակտ արագ մատուցման համար:
  7. Արտադրել պատկերը:

Ահա, թե ինչպես ես այն կառուցեցի Illustrator- ի միջոցով (նշենք, որ բերքի տարածքը շատ ավելի բարձր է… դա հենց այնպես է, որ դուք կարողանաք տեսնել, թե ինչ եմ անում):
Պատկեր Illustrator- ի հետ

Ահա մի օրինակ, թե ինչպես է ելքը նայում ֆոնային պատկերին.
Ֆոնային պատկերի օրինակ

Ահա, թե ինչպես կիրառել պատկերը ՝ օգտագործելով ձեր մարմնի ոճի պիտակը ձեր մեջ CSS ֆայլը.

ֆոն `# B2B2B2 url ('images / bg.gif') կրկնել- y կենտրոն;

Ահա ֆոնային ոճի պիտակի կտրվածք.

  • # B2B2B2 - սահմանում է էջի ընդհանուր ֆոնի գույնը: Այս օրինակում մոխրագույն է ՝ համապատասխանելու ֆոնային պատկերի մոխրագույնին:
  • url ('images / bg.gif') - սահմանում է ֆոնային պատկերը, որը կցանկանայիք օգտագործել:
  • կրկնել- y - սահմանում է պատկերի կրկնությունը y- առանցքի վրա: Այսպիսով, ֆոնի պատկերը կկրկնվի էջի վերևից ներքև:
  • center - նկարը սահմանում է էջի կենտրոնում:

Հաճելի և հեշտ… մեկ պատկեր, մեկ ոճի հատկորոշիչ:

2 Comments

  1. 1
  2. 2

Ինչ եք կարծում?

Այս կայքը օգտագործում է Akismet- ը սպամի նվազեցման համար: Իմացեք, թե ինչպես է ձեր տվյալները մշակվում.