Како променити боју позадине помоћу ЦСС -а

Како променити боју позадине помоћу ЦСС -а

Један од најузбудљивијих тренутака у каријери било ког напредног програмера је учење како променити боју позадине веб странице.





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



Овај водич ће покрити све што требате знати о томе како промијенити боју позадине помоћу ЦСС -а.



Гет Сет уп

Хајде да избацимо мали прелиминарни рад.

како побољшати квалитет звука на лаптопу Виндовс 10

Белешка : Препоручујем употребу Код Висуал Студио са Екстензија Ливе Сервер да бисте видели промене у реалном времену док ажурирате ХТМЛ и ЦСС.



  1. Направите фасциклу за датотеке вашег пројекта.
  2. Креирајте индек.хтмл датотеку за смештај вашег ХТМЛ -а. Можете користити предзнак или само поставити неки , , и ознаке.
  3. Створити стилови.цсс датотеку за свој ЦСС.
  4. Повежите своју ЦСС датотеку са ХТМЛ -ом постављањем унутар ознаке.

Сада сте спремни за почетак уређивања ЦСС -а.

Повезан: Како направити веб локацију бојлера



Како променити боју позадине помоћу ЦСС -а

Најједноставнији начин да промените боју позадине је циљање тело таг. Затим уредите боја позадине својство. Кодове боја можете пронаћи тако што ћете тражити и користити проширење прегледача Гоогле Цолор Пицкер

body {
background-color: rgb(191, 214, 255);
}

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



Тхе боја позадине некретнина прихвата боје у шест различитих облика:

  • име : лигхтскиблуе; (за приближну апроксимацију)
  • хексадецимални код : # бфд6фф;
  • ргб : ргб (191, 214, 255);
  • ргба : ргба (191, 214, 255, 1); где до је алфа (непрозирност)
  • ХСЛ : хсл (218 °, 100%, 87%);
  • ХСЛА : хсла (218 °, 100%, 87%, 1); где до је алфа (непрозирност)

Користите стенографију бацкгроунд имање на месту боја позадине да исечете додатни код. Овом методом можете променити боју позадине било ког ХТМЛ елемента.

Створити елемент и дајте му класу - у овом случају класа је панел . Поставите га висина и ширина својства у ЦСС -у. Изаберите елемент у ЦСС -у и уклоните боју.

body {
background-color: rgb(191, 214, 255);
}
.container{
display: flex;
justify-content: center;
align-items: center;
height: 90vh;
}
.panel {
background: rgb(255, 148, 148);
height: 10rem;
width: 30%;
}
.muo-text {
font-size: 3em;
font-weight: bolder;
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
position: absolute;
}

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

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

body {
background: linear-gradient(90deg, rgba(234,233,255,1) 0%, rgba(252,167,213,1) 35%, rgba(194,245,255,1) 100%);
}

Како променити позадинску слику у ЦСС -у

Шта ако желите да позадина буде слика, а не једнобојна боја или градијент? Стенографија бацкгроунд имање је познати пријатељ.

Уверите се да је слика у истој фасцикли као и ваше ХТМЛ и ЦСС датотеке. У супротном ћете морати да користите путању датотеке унутар заграда, а не само име:

body {
background: url(leaves-and-trees.jpg)
}

Вау! Изгледа да је слика превише увећана. То можете поправити помоћу бацкгроунд-сизе својство.

body {
background: url(leaves-and-trees.jpg);
background-size: cover;
}

Да користим стенографију бацкгроунд имовине заједно са бацкгроунд-сизе својство корице , морате такође навести бацкгроунд-поситион својства и одвојите вредности обрнутом косом цртом (чак и ако су подразумеване позиционе вредности, нпр горе лево .)

body {
background: url(leaves-and-trees.jpg) top left / cover;
}

Ето га! Позадинска слика одговарајуће величине у једном реду ЦСС -а.

Опширније: Како поставити позадинску слику у ЦСС -у

Белешка : Будите опрезни при укључивању великих позадинских слика које заузимају пуно простора за складиштење. Ово може бити тешко учитати на мобилном уређају, где имате све две секунде да дате корисницима разлог да остану на страници.

Побољшајте своју ЦСС игру помоћу ЦСС бок-схадов

За програмера попут вас, својства боје позадине и слике позадине старе су вести. На срећу, увек постоји нешто ново за научити.

Покушајте да својим кутијама дате појачање помоћу ЦСС бок-схадов. Ваши ХТМЛ елементи никада нису изгледали боље!

Објави Објави Твеет Емаил Како користити ЦСС бок-схадов: 13 трикова и примера

Благе кутије изгледају досадно. Улепшајте их помоћу ЦСС бок-схадов ефекта!

Прочитајте следеће Повезане теме
  • Програмирање
  • Веб Девелопмент
  • Веб дизајн
  • ЦСС
О аутору Марцус Меарс ИИИ(26 објављених чланака)

Марцус је доживотни ентузијаст у технологији и писац уредник у МУО. Својом слободном каријером писца започео је 2020. године, покривајући модерну технологију, гаџете, апликације и софтвер. Студирао је рачунарство на факултету са фокусом на фронт-енд веб развој.

Више од Марцуса Меарса ИИИ

Претплатите се на наш билтен

Придружите се нашем билтену за техничке савете, критике, бесплатне е -књиге и ексклузивне понуде!

Кликните овде да бисте се претплатили