Как да промените цвета на фона с CSS

Как да промените цвета на фона с CSS

Един от най-вълнуващите моменти в кариерата на начинаещ разработчик е да се научи как да променя цвета на фона на уеб страница.





Работата с HTML е страхотна и всичко, но само с няколко реда CSS можете да направите вашите страници и вашето програмиране пълен.





Това ръководство ще обхване всичко, което трябва да знаете за това как да промените цвета на фона с CSS.





Настройте се

Нека да направим малко предварителна работа.

полезни пакетни файлове за Windows 10

Забележка : Препоръчвам да използвате Код на Visual Studio с Разширение за сървър на живо за да видите промените в реално време, докато актуализирате HTML и CSS.



  1. Създайте папка за файловете на вашия проект.
  2. Създайте index.html файл, за да поместите вашия HTML. Можете да използвате първоначалния код или просто да го настроите , , и тагове.
  3. Създавам styles.css файл за вашия CSS.
  4. Свържете вашия CSS файл с HTML, като го поставите вътре в тагове.

Сега сте готови да започнете да редактирате CSS.

Свързани: Как да създадете уебсайт за котли





Как да промените цвета на фона с CSS

Най -простият начин да промените цвета на фона е чрез насочване към тяло етикет. След това редактирайте Цвят на фона Имот. Можете да намерите цветови кодове, като потърсите и използвате разширението на браузъра Google Color Picker

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

Този код променя фона на хубаво светло синьо.





The Цвят на фона имотът приема цветове в шест различни форми:

  • име : lightkyblue; (за близко приближение)
  • шестнадесетичен код : # bfd6ff;
  • rgb : rgb (191, 214, 255);
  • rgba : rgba (191, 214, 255, 1); където да се е алфа (непрозрачност)
  • HSL : hsl (218 °, 100%, 87%);
  • HSLA : hsla (218 °, 100%, 87%, 1); където да се е алфа (непрозрачност)

Използвайте стенограмата заден план имот на мястото на Цвят на фона за изрязване на допълнителен код. Можете да промените цвета на фона на всеки HTML елемент, като използвате този метод.

Създавам елемент и му дайте клас - в този случай класът е панел . Задайте го височина и ширина свойства в CSS. Изберете елемента в CSS и оцветете.

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;
}

Тук можете да видите тяло заден план Имотът е оформен независимо от .панел заден план Имот.

Свойството background също приема градиенти:

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

Как да промените фоновото изображение в CSS

Ами ако искате фонът да е изображение, а не плътен цвят или градиент? Стенографията заден план имотът е познат приятел.

Уверете се, че изображението е в същата папка като вашите HTML и CSS файлове. В противен случай ще трябва да използвате пътя на файла в скобите, а не само името:

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;
}

Ето! Фоново изображение с подходящ размер в един ред на CSS.

Прочетете още: Как да зададете фоново изображение в CSS

Забележка : Внимавайте да включите големи фонови изображения, които заемат много място за съхранение. Те могат да бъдат трудни за зареждане на мобилни устройства, където имате всички две секунди, за да дадете на потребителите причина да останат на страницата.

Подобрете вашата CSS игра с CSS box-shadow

За разработчик като вас, свойствата на цвета на фона и фоновото изображение са стари новини. За щастие винаги има какво ново да се научи.

Опитайте да дадете тласък на вашите кутии с CSS box-shadow. Вашите HTML елементи никога не са изглеждали по -добре!

Дял Дял Туит електронна поща Как да използвате CSS box-shadow: 13 трика и примери

Меките кутии изглеждат скучни. Украсете ги с CSS box-shadow ефект!

Прочетете Напред
Свързани теми
  • Програмиране
  • Уеб разработка
  • Уеб дизайн
  • CSS
За автора Маркус Миърс III(26 статии са публикувани)

Маркъс е ентусиаст на технологиите през целия живот и редактор на писател в MUO. Той започна кариерата си на писател на свободна практика през 2020 г., обхващайки модерни технологии, джаджи, приложения и софтуер. Учи компютърни науки в колеж с акцент върху front-end уеб разработка.

Още от Marcus Mears III

Абонирайте се за нашия бюлетин

Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

Щракнете тук, за да се абонирате