ЦСС је скраћеница од Цасцадинг Стиле Схеетс. То је једноставан, али моћан језик дизајна који има способност да трансформише веб странице. Једноставно речено, поједностављује поступак чинећи веб странице презентабилним и привлачним за кориснике уз помоћ . У овом чланку ћемо разумети како имплементирати различите позадинске слике у ЦСС следећим редоследом:
- Слика позадине у ЦСС својствима
- Слика позадине у ЦСС-у
- Понављање позадине
- Прилог позадине
- Позадина
- Слика позадине у ЦСС величини
- Боја позадине
Слика позадине у ЦСС својствима
Постоје многа својства која се користе за контролу понашања и позиционирања слике. Ова својства су:
- позадинска слика
- позадина-понављање
- позадина-прилог
- позадина-положај
- величина позадине
- боја позадине
Упознаћемо се са сваким од ових својстава и видећемо када и како да их користимо уз занимљиве демонстрације.
Слика позадине у ЦСС-у
Тхе позадинска слика својство као што му само име говори једноставно се користи за означавање и постављање позадинске слике кроз елемент на веб страници. Позадинска слика се подразумевано поставља у горњи леви угао елемента.
синтакса: позадина-слика: урл | нема | линеарни-градијент | радијални-градијент
тело {бацкгроунд-имаге: урл ('аппле.јпг')}позадина помоћу урл-а
Хајде да разумемо параметре:
- урл: Улаз у овај параметар омогућава нам да одредимо путању до датотеке до било које слике или УРЛ до слике коју треба поставити као позадину. Да би се декларисало више слика, УРЛ-ови су одвојени граничником зарезом.
тело {бацкгроунд-имаге: урл ('аппле.јпг')} 
- ниједан: Ово је подразумевана вредност својства и не приказује се позадинска слика ако је наведена њена вредност.
тело {позадина: нема}- линеарни градијент (): Слика позадине је постављена на линеарни градијент. За ово својство потребно је навести најмање две боје, тј. Од врха до дна.
боди {бацкгроунд-цолор: # 001 бацкгроунд-имаге: линеарни градијент (бели 15%, прозирни 16%), линеарни градијент (бели 15%, прозирни 16%) величина позадине: 60пк 60пк позиција позадине: 0 0, 30пк 30пк}- радијални градијент (): Слика позадине је постављена на радијални градијент. За ово својство потребно је навести најмање две боје, тј. За средиште до ивица.
боди {бацкгроунд-цолор: # 001 бацкгроунд-имаге: радијални градијент (бела 15%, прозирна 16%), радијални градијент (бела 15%, прозирна 16%) величина позадине: 60пк 60пк позиција позадине: 0 0, 30пк 30пк}- понављајући-линеарни-градијент (): Понавља линеарни градијент. Искористимо исти пример који смо видели горе у линеарном градијенту за понављајући линеарни градијент и увидимо разлику.
боди {бацкгроунд-цолор: # 001 бацкгроунд-имаге: линеарни-градијент који се понавља (бели 15%, прозирни 16%), понављајући-линеарни-градијент (бели 15%, прозирни 16%) : 0 0, 30 пиксела и 30 пиксела}- понављајући-радијални-градијент (): Понавља радијални градијент. Истражимо исти пример који смо горе користили у радијалном градијенту.
боди {бацкгроунд-цолор: # 001 бацкгроунд-имаге: понављајући-радијални-градијент (бели 15%, прозирни 16%), понављајући-радијални-градијент (бели 15%, прозирни 16%) величина позадине: 60пк 60пк позадина-положај : 0 0, 30 пиксела и 30 пиксела}Резервна позадина
Увек је препоручљиво као професионални савет додати боју позадине као резервну опцију. Спасавање долази нарочито када се позадинске слике не учитају или градијент позадине који смо поставили током развоја не подржавају неки од старих прегледача у којима се прегледава.
Ово не квари корисничко искуство и може се прогласити овако:
тело {позадина: урл (аппле_лост.јпг) розе}Вишеструка позадина
Такође имамо могућност постављања више слика у позадини и она је у већини случајева потребна као слика у првом плану и позадини. Овде је важан редослед слике, прво се проглашава слика која треба да буде на предњој страни, а следећа се проглашава слика која би требало да буде задња.
Испод је пример за више слика у позадини:
боди {бацкгроунд-имаге: урл ('смалл-хеарт.јпг'), урл ('бацкгроунд.јпг')}Понављање позадине
Својство бацкгроунд-репеат се користи заједно са бацкгроунд-имаге за дефинисање понашања слике у понављању. Одређује да ли ће се и како поновити слика у позадини. Позадинска слика се подразумевано понавља и вертикално и хоризонтално.
Могуће вредности су:
- репеат - Слика се понавља и хоризонтално и вертикално
- но-репеат - слика се не понавља
- репеат-к - Слика се понавља хоризонтално
- репеат-и - Слика се понавља вертикално
- размак - Слика се понавља са парним размацима или празнинама између.
- округли - Слика се понавља да би попунила подручје без икаквих празнина између њих.
Синтакса ЦСС за својство бацкгроунд-репеат је:
бацкгроунд-репеат: репеат | репеат-к | репеат-и | но-репеат | размак | округли
боди {бацкгроунд-имаге: урл ('хеарт.пнг'), урл ('бацкгроунд.пнг') бацкгроунд-репеат: репеат-и, репеат-к бацкгроунд-цолор: #фффффф}Прилог позадине
Тхе позадина-прилог својство се користи заједно са позадинском сликом да би се изјавило да ли слика треба да се помера док се садржај помера. Означава да позадинску слику треба поправити или да се помера заједно са документом у односу на приказ прозора прегледача. Подразумевана вредност је померање.
Могуће вредности су:
- померити - слика се помера заједно са страницом.
- фиксно - слика се неће померати заједно са страницом
Синтакса ЦСС-а за прилог у позадини је:
бацкгроунд-аттацхмент: помицање | фиксно
боди {бацкгроунд-имаге: урл ('хеарт.пнг'), урл ('бацкгроунд.пнг') бацкгроунд-репеат: спаце, роунд}ц ++ функција сортирања
Позадина
Тхе позадина-положај својство се користи за означавање локације или позиционирања слике у позадини. Могуће вредности су:
- врх
- јел тако
- дно
- лево
- центар
- комбинација ових вредности (нпр. лево горе)
Синтакса ЦСС за позицију у позадини је:
бацкгроунд-поситион: горе | десно | лево | доле | центар
боди {бацкгроунд-имаге: урл ('хеарт.пнг') бацкгроунд-репеат: но-репеат бацкгроунд-аттацхмент: сцролл}Слика позадине у ЦСС величини
Ово својство је једно од најкориснијих јер нам омогућава контролу величине позадинске слике. Постоје различите комбинације које можемо користити са овом особином и у складу с тим добити резултате. Подразумевана вредност је ауто.
Следеће вредности се могу користити са величином позадине:
- ауто
- дужина- висина и ширина слике нпр. 20пк 40пк.
- проценат- висина и ширина слике као проценат в.р.т надређени елемент нпр. 50% 50%.
- средина - поравнајте слику у средину
- поклопац, скалирајући слику тако да је потпуно покрије за подручје позадине.
- садрже, скалирајући слику тако да стане до њене стварне висине и ширине.
Синтакса ЦСС за позицију у позадини је:
величина позадине: вредност
боди {бацкгроунд-имаге: урл ('хеарт.пнг'), урл ('бацкгроунд.пнг') бацкгроунд-репеат: без понављања, понављање бацкгроунд-сизе: 400пк 150пк, цовер}боди {бацкгроунд-имаге: урл ('хеарт.пнг'), урл ('бацкгроунд.пнг') бацкгроунд-репеат: но-репеат, репеат бацкгроунд-сизе: садрже, 400пк 150пк}Боја позадине
Ово најједноставније од свих својстава у ЦСС-у се примењује. Примењује пуне боје на позадину странице. Вредност за ово својство може се навести у бојама (нпр. Црвена, плава, итд.), Хексадецималној вредности и РГБ вредности.
Синтакса ЦСС за боју позадине је:
боја позадине: вредност
тело {бацкгроунд-имаге: урл (смалл-хеарт.јпг) бацкгроунд-цолор: # 22а8е3}Овим су закључена сва својства која можемо користити у позадини. Увек можемо испробати различите комбинације својстава као што смо видели у нашој демонстрацији.
ЦСС је неопходан и мора стећи вештине за све веб програмере. Помаже приликом дизајнирања и стилизовања позадине и стварања импресивних веб локација и обогаћивања корисничког искуства. Најбоље је да наставите да експериментишете и у потпуности искористите ову специјалну фронт-енд технологију јер може да учини чуда и динамички трансформише страницу.
Погледајте наш који долази са обуком уживо коју воде инструктори и искуством у стварном животу. Овај тренинг чини вас вештима за рад са позадинским и предњим веб технологијама. Обухвата обуку о веб развоју, јКуери-ју, Ангулар-у, НодеЈС-у, ЕкпрессЈС-у и МонгоДБ-у.
Имате питање за нас? Молимо вас да га поменете у одељку за коментаре блога „Позадинска слика у ЦСС-у“ и јавићемо вам се.