ЦСС позадина у односу на боју позадине

У овом приручнику ћемо детаљно научити разлику између својстава позадине и боје позадине.

Почнимо!

Својство ЦСС позадине

Да бисте подесили позадину било ког ХТМЛ елемента, ЦСС “ позадини ” имовина се користи. То је скраћено својство од још осам својстава што значи да их можете користити све у једном реду. Та друга својства су:

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

Синтакса

Ево синтаксе својства позадине:

Пређимо на објашњење свих горе наведених особина једно по једно.

Својство ЦСС бацкгроунд-цолор

Помоћу ' боја позадине ” можете подесити боју позадине. Боја ће се појавити иза ХТМЛ елемената.

Синтакса

Синтакса својства бацкгроунд-цолор је:

На месту „ боја “, можете подесити боју позадине коју желите да се појави иза елемената.

Пример

Прво, у ХТМЛ датотеци ћемо креирати контејнер помоћу ознаке <див>, а затим ћемо додати наслов и пасус.

ХТМЛ

У ЦСС-у ћемо подесити висину дива као „ 100% ” да би се појавио на целој страници и величини фонта текста као „ кк-велики ”. Након тога, поставите боју позадине као „ акуа ”.

ЦСС

На слици испод, можете видети да је примењена боја позадине:

Својство ЦСС бацкгроунд-имаге

„ позадинска слика ” својство се користи за постављање једне или више слика као позадине ХТМЛ елемената. Можете користити ово својство за додавање различитих позадинских слика за различите елементе.

Синтакса

Синтакса својства бацкгроунд-имаге је:

Овде наведите путању слике коју желите да поставите као позадину као аргумент за „ урл() ”.

Пример

У наставку претходног примера, додајте слику позадине у „ див ' класа. Додаћемо УРЛ слике као „ урл(имг.јпг) ”:

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

Имајте на уму да се слика понавља. Да бисте решили овај проблем, погледајте следећу имовину.

Својство ЦСС бацкгроунд-репеат

Када додате слику као позадину на веб страници, она се подразумевано понавља. Да бисте избегли ово понављање и поставили образац по свом избору, „ бацкгроунд-репеат ” имовина се користи.

Синтакса

Синтакса својства бацкгроунд-репеат је:

Опис наведених вредности својства бацкгроунд-репеат је дат у наставку:

• понављање: Користи се за понављање слике у оба смера, вертикално и хоризонтално.
• понови-к: Користи се за постављање понављања слике само хоризонтално.
• понављање: Одређује вертикално понављање слике.
• непонављање: Користи се да би се избегло понављање слике.

Пример

Овде ћемо поставити вредност својства бацкгроунд-репеат као „ без понављања ”:

Исход горе наведеног кода је дат у наставку. Можете видети да се слика више не понавља:

Својство ЦСС бацкгроунд-поситион

Да бисте подесили положај позадинске слике, „ бацкгроунд-поситион ” се користи својство. Омогућава вам да прилагодите слику у различитим позицијама као што су леви горњи, леви центар, леви доњи, десни врх, десни центар и још много тога.

Синтакса

Синтакса својства бацкгроунд-поситион је:

На месту „ вредност “, можете одредити положај слике.

Пример

Овде ћемо поставити позадину као „ центар ”:

У излазу испод, слика се појављује у центру странице:

ЦСС својство величине позадине

Да бисте подесили величину позадинске слике, „ бацкгроунд-сизе ” се користи својство.

Синтакса

Величина позадине има следећу синтаксу:

Следи опис вредности својства величине позадине:

• дужина: Користи се за фиксирање ширине и висине позадинске слике.
• омот: Користи се за подешавање позадинске слике у целој позадини.

Пример

Поставићемо величину позадине као „ 100% 'висина и ' 80% ” ширина:

Можете видети да је величина слике промењена на основу наведених димензија:

Својство ЦСС бацкгроунд-оригин

„ позадина-порекло ” својство се користи за подешавање области позиционирања позадинске слике. Слика се подразумевано подешава у горњем левом углу.

Синтакса

Синтакса својства бацкгроунд-оригин је:

Вредности својства бацкгроунд-оригин су описане у наставку:

• паддинг-бок: То је подразумевана вредност својства бацкгроунд-оригин која се користи за подешавање положаја позадинске слике према ивици завршне обраде.
• гранична кутија: Користи се за постављање слике у складу са оквиром слике.
• кутија са садржајем: Користи се за постављање позадинске слике у складу са садржајем слике.

Белешка: Својство бацкгроунд-оригин не ради ако је вредност својства бацкгроунд-аттацхмент постављена као „ фиксно ”.

Пример

Прво направите ивицу око контејнера. Овде ћемо наставити претходни пример и поставити вредност допуна као „ 10пк ”. Након тога, подесите ширину ивице као „ 15пк ”, стилизован као „ гребен “, и боју као „ ргб(1, 68, 68) ”. На крају ћемо доделити вредност особине позадинског порекла као „ садржај-кутија ”:

Исход горе наведеног кода је дат у наставку. Можете видети да је позиција слике подешена према садржају див:

Својство ЦСС бацкгроунд-цлип

„ бацкгроунд-цлип ” својство ради на боју позадине елемента. Омогућава вам да контролишете колико се боја позадине протеже изван елемента, као што је допуна елемента, његова ивица и његов садржај.

Синтакса

Синтакса својства бацкгроунд-цлип је:

Вредности својства бацкгроунд-оригин су описане у наставку:

• гранична кутија: То је подразумевана вредност својства бацкгроунд-оригин која се користи за постављање боје позадине иза ивице.
• паддинг-бок: Користи се за подешавање боје унутар оквира за пуњење елемента.
• кутија за садржај: Користи се за постављање боје позадине према садржају елемента.

Пример

Наставићемо претходни пример и променићемо вредност стила ивице у „ тачкаста ” да бисте разумели својство бацкгроунд-цлип. Након тога, поставићемо вредност својства бацкгроунд-цлип као „ паддинг-бок ”:

Излаз означава да се бела боја позадине појављује када се ивица ивице заврши:

Својство ЦСС позадинског прилога

„ позадину-прилог ” својство се користи за подешавање понашања или слике током померања странице. Његово понашање се може подесити померањем са другим елементима или поправити.

Синтакса

Синтакса својства позадинског прилога је:

Можете поставити вредност позадинског прилога као „ фиксно ” да поправите слику у позадини или „ свитак ” да бисте дозволили да се слика помера са страницом.

Белешка: Подразумевано, вредност својства позадинског прилога је подешена као „ свитак ”.

Може се видети да додата позадинска слика није статична када скролујемо. Сада да поправимо овај проблем.

Да бисмо то урадили, поставили смо вредност својства позадинског прилога као „ фиксно ”:

Ево резултата који показује да је слика поправљена:

Сада идите ка поређењу између својстава позадине и боје позадине.

ЦСС позадина у односу на боју позадине

Дата табела ће разликовати својства позадине и боје позадине на основу њихових карактеристика:

Објашњено је како се својства боје позадине разликују од својстава позадине.

Закључак

ЦСС “ позадини ” својство је скраћено својство које се користи за постављање више позадинских вредности одједном, као што су боја, слика, позиција, величина, порекло и још много тога. С друге стране, ' боја позадине ” се користи само за додавање боје позадини. У овом водичу смо расправљали о разлици између својства ЦСС позадине и својства ЦСС боје позадине.