7 ЦСС позадинских својстава за оживљавање вашег веб дизајна

Позадинска тема ваше веб странице може значајно утицати на њен изглед и осећај. Боје, слике и обрасци позадине изазивају емоције и стварају сјајно корисничко искуство.

Можете користити ЦСС својства позадине да бисте подесили стил позадине ХТМЛ елемената. Сазнајте све о неким од ЦСС својстава која можете користити за креирање одличних позадина.

1. боја позадине

Тхе својство боје позадине поставља боју позадине елемента. Можете подесити боју користећи име као што је „црвена“, ХЕКС вредност као што је „#00ФФ00“ или РГБ вредност – попут „ргб (0, 255, 0)“. Такође можете да користите ХСЛ вредност да бисте подесили боју позадине користећи нијансу, засићеност и светлост.

Следећи пример поставља боју позадине целе странице на наранџасту. Сваки од елемената наслова добија другачију позадину.

<тело>
<х2>Ја сам Греенх2>
<х3>Ја сам Црвених3>
<х4>Ја сам плавах4>
тело>

Користећи ЦСС, можете применити јединствену боју позадине на сваки елемент:

тело {
боја позадине: наранџаста;
}
х2 {
боја позадине: #006600;
}
х3 {
боја позадине: ргб(128, 0, 0);
}
х4{
боја позадине: хсл(240, 100%, 50%);
}

Ово ће стилизовати страницу да изгледа овако:

Можете користити својство непрозирности да одредите транспарентност елемента. Непрозирност има вредности између 0,0 и 1,0. Што је нижа вредност, то је елемент транспарентнији.

На пример, покушајте да подесите непрозирност елемента тела на 0,5:

тело {
боја позадине:оранге;
непрозирност:0.5;
}

Ово ће се приказати на следећи начин - упоредите боје са онима на претходном снимку екрана:

2. позадинска слика

Својство бацкгроунд-имаге поставља слику као позадину елемента. Можете референцирати локалну слику или слику са интернета.

<тело>
 <х1>Здравотамо!х1>
 <стр>Ииматиансликаинмојпозадини!стр>
тело>

ЦСС датотека:

тело {
позадинска слика:урл("хттпс://слике.пекелс.цом/фотографије/1191710/пекелс-пхото-1191710.јпег?ауто=стиснути&цс=тинисргб&в=1260&х=750&дпр=1");
}

Ово ће се приказати овако:

Такође можете користити позадински градијенти да бисте креирали јединствен изглед ваше апликације.

3. бацкгроунд-репеат

Својство бацкгроунд-имаге подразумевано понавља слике. Можете одабрати да поновите слику хоризонтално на к-оси или вертикално на и-оси.

Алтернативно, ако понављање не одговара вашем стилу, можете га уклонити користећи вредност без понављања.

<тело>
<х1>Поздрав!х1>
<х3>Демонстрирам својство понављања позадине и понављања на к-оси!х3>
тело>

Користите следећи ЦСС да примените позадину која се понавља дуж к-осе:

тело {
позадинска слика: урл("хттпс://слике.пекелс.цом/фотографије/459335/пекелс-пхото-459335.јпег?ауто=стиснути&цс=тинисргб&в=1260&х=750&дпр=1");
бацкгроунд-репеат: репеат-к;
}

Резултат:

Затим покушајте да поновите слику на и-оси:

тело {
позадинска слика:урл("хттпс://цдн.пикабаи.цом/фото/2016/04/18/22/05/шкољке-1337565__340.јпг");
бацкгроунд-репеат:репеат-и;
}

Резултат:

Пример на и оси свакако изгледа искривљено. Ако ово нису обрасци које тражите, можете одредити без понављања уместо тога:

тело {
позадинска слика:урл("хттпс://слике.пекелс.цом/фотографије/259915/пекелс-пхото-259915.јпег?ауто=стиснути&цс=тинисргб&в=600");
бацкгроунд-репеат:но-репеат;
}

Резултат:

4. бацкгроунд-позиција

Својство бацкгроунд-поситион дефинише позицију позадинске слике унутар њеног елемента. Користи кључне речи специфичне за позицију као што су центар, врх, и дно, или вредност пиксела или процента.

Додајте својство позадинске позиције последњој слици:

тело {
позадинска слика: урл("хттпс://слике.пекелс.цом/фотографије/259915/пекелс-пхото-259915.јпег?ауто=стиснути&цс=тинисргб&в=600");
бацкгроунд-позиција: топцентар;
}

То ће изгледати овако:

Можете видети да слика искривљује изглед веб странице. Хајде да то поправимо следећим својством.

5. величина позадине

Можете користити својство позадинске слике да дефинишете одређену величину слике. Користи кључне речи попут поклопац и садржати или вредност пиксела или процента. Хајде да поправимо изобличену слику у позадини додавањем својства величине позадине.

тело {
 бацкгроунд-имаге: урл(" https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg? ауто=цомпресс&цс=тинисргб&в=600");
 бацкгроунд-репеат: без понављања;
 бацкгроунд-поситион: центар;

Резултат показује да слика сада пропорционално покрива веб страницу.

6. позадину-прилог

Својство позадинског прилога дефинише да ли позиција позадинске слике остаје фиксна или се помера. Можете користити кључне речи фиксне или скроловати.

Хајде да то покажемо у следећем коду:

<тело>
<х1>Својство позадинског прилогах1>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
<стр>Са фиксним својством прилога приметићете да се позадина не помера са текстом.стр>
тело>

ЦСС датотека:

тело {
позадинска слика: урл("хттпс://слике.пекелс.цом/фотографије/96627/пекелс-пхото-96627.јпег?ауто=стиснути&цс=тинисргб&в=600");
бацкгроунд-репеат: без понављања;
бацкгроунд-позиција: центар;
величина позадине: поклопац;
позадину-прилог: фиксно;
}

Ако се померите низ страницу, приметићете да се позадина не помера:

Да бисте демонстрирали својство позадинског прилога за померање, промените кључну реч у свитак. Приметићете да се сада позадина помера са текстом.

тело {
позадинска слика: урл("хттпс://слике.пекелс.цом/фотографије/96627/пекелс-пхото-96627.јпег?ауто=стиснути&цс=тинисргб&в=600");
бацкгроунд-репеат: без понављања;
бацкгроунд-позиција: центар;
величина позадине: поклопац;
позадину-прилог: свитак;
}

7. Позадинско својство стенографије

Можда ћете приметити да морате да укључите неколико својстава да бисте добили савршену позадину. Ово укључује писање много кода. Али можете скратити код користећи својство скраћенице позадине.

Скраћено својство вам омогућава да поставите многа својства позадине у једном реду. Користите кључну реч позадини за постављање својства стенографије.

На пример, уместо да пишете код овако:

тело {
боја позадине: зелен;
позадинска слика: урл("лаптоп3.јпг");
бацкгроунд-репеат: без понављања;
величина позадине: поклопац;
позадину-прилог: свитак;
бацкгроунд-позиција: центар;
}

Можете га написати у једном реду, овако:

тело {
позадини: зеленурл("лаптоп3.јпг") без понављањапоклопацсвитакцентар;
}

Својство стенограма прати одређени редослед. Својства морате поравнати тим редоследом чак и ако једно или више недостаје. редослед је:

• боја позадине
• позадинска слика
• бацкгроунд-репеат
• позадину-прилог
• бацкгроунд-позиција

Можете креирати занимљиве дизајне помоћу ЦСС-а користећи различите позадинске шаре. Помоћу ових образаца можете постићи јединствене и изванредне позадине за своју веб локацију.

Остала својства позадине у ЦСС-у

ЦСС је моћан и са њим можете много да урадите да бисте зачинили своју апликацију. Можете да користите својства као што су бацкгроунд-цлип, бацкгроунд-оригин и бацкгроунд-бленд-моде да додате неку анимацију.

Такође можете да користите градијенте и обрасце да бисте прилагодили своје странице. Експериментишите са својствима ЦСС позадине да бисте изоштрили своје вештине веб дизајна.