Как изменить цвет фона с помощью CSS

Как изменить цвет фона с помощью CSS

Один из самых захватывающих моментов в карьере любого начинающего фронтенд-разработчика - это научиться изменять цвет фона веб-страницы.





Работать с HTML - это здорово и все такое, но с помощью всего нескольких строк CSS вы можете оживить свои страницы и свое путешествие по программированию.



Это руководство расскажет обо всем, что вам нужно знать о том, как изменить цвет фона с помощью CSS.





Получите настройку

Сделаем небольшую предварительную работу.

рутинг телефона разблокирует его

Примечание : Рекомендую использовать Код Visual Studio с Расширение Live Server для просмотра изменений в реальном времени по мере обновления 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);
}

Этот код меняет фон на приятный светло-голубой.



В фоновый цвет свойство принимает цвета в шести различных формах:

  • имя : Lightskyblue; (для близкого приближения)
  • шестнадцатеричный код : # 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;
}

Здесь вы можете увидеть тело фон свойство оформлено независимо от .panel фон имущество.

Свойство 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;
}

Чтобы использовать сокращение фон собственность в сочетании с размер фона имущество крышка , вы также должны указать background-position properties и разделите значения обратной косой чертой (даже если это позиционные значения по умолчанию, такие как верхний левый .)

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

Вот так! Фоновое изображение правильного размера в одной строке CSS.

Подробнее: Как установить фоновое изображение в CSS

Примечание : Будьте осторожны с добавлением больших фоновых изображений, которые занимают много места для хранения. Их может быть сложно загрузить на мобильном устройстве, где у вас есть всего две секунды, чтобы дать пользователям повод остаться на странице.

Улучшите свою игру CSS с помощью CSS box-shadow

Для такого разработчика, как вы, свойства background-color и background-image - старые новости. К счастью, всегда есть чему поучиться.

Попробуйте усилить свои коробки с помощью CSS box-shadow. Ваши HTML-элементы никогда не выглядели лучше!

Делиться Делиться Твитнуть Эл. адрес Как использовать CSS box-shadow: 13 хитростей и примеров

Блестящие коробки выглядят скучно. Украсьте их с помощью эффекта тени блока CSS!

Читать далее Похожие темы
  • Программирование
  • Веб-разработка
  • Веб-дизайн
  • CSS
Об авторе Маркус Мирс III(Опубликовано 26 статей)

Маркус - пожизненный энтузиаст технологий и редактор-писатель в MUO. Он начал свою карьеру внештатного писателя в 2020 году, освещая тенденции в технологиях, гаджетах, приложениях и программном обеспечении. Он изучал информатику в колледже с упором на интерфейсную веб-разработку.

Ещё от Marcus Mears III

Подписывайтесь на нашу новостную рассылку

Подпишитесь на нашу рассылку, чтобы получать технические советы, обзоры, бесплатные электронные книги и эксклюзивные предложения!

Нажмите здесь, чтобы подписаться