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

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

Познакомьтесь с мощной, но простой в использовании функцией CSS – изменением цвета фона

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

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

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

Приступайте к работе

Давайте проведем небольшую подготовительную работу

Примечание : Я рекомендую использовать Visual Studio Code с расширением Live Server для просмотра изменений в реальном времени по мере обновления HTML и CSS

  1. Создайте папку для файлов вашего проекта.
  2. Создайте файл index.html для размещения HTML. Вы можете использовать шаблонный код или просто установить несколько тегов <html> , <head> и <body>.
  3. Создайте файл styles.css для вашего CSS.
  4. Свяжите файл CSS с HTML, разместив <link rel=’stylesheet’ href=’styles.css’> внутри тегов <head>.

Теперь вы готовы приступить к редактированию CSS

Похожие: Как создать шаблонный сайт

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

Самый простой способ изменить цвет фона – это обратиться к тегу body. Затем отредактируйте свойство background-color. Вы можете найти коды цветов, найдя и используя расширение для браузера Google Color Picker

body
    background-colorrgb(191, 214, 255);

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

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

  • имя : lightskyblue; (для близкого приближения).
  • шестнадцатеричный код : #bfd6ff;.
  • rgb : rgb(191, 214, 255);.
  • rgba : rgba(191, 214, 255, 1); где a – альфа (непрозрачность).
  • HSL : hsl(218°, 100%, 87%);.
  • HSLAhsla(218°, 100%, 87%, 1); где a – альфа (непрозрачность).

Используйте сокращенное свойство background вместо background-color для сокращения лишнего кода. С помощью этого метода можно изменить цвет фона любого элемента HTML

Создайте элемент <div> и присвойте ему класс – в данном случае это panel. Установите его свойства height и width в CSS. Выберите элемент в CSS и выделите его цветом

body
    background-colorrgb(191, 214, 255);

.container
    displayflex
    justify-contentcenter
    align-itemscenter
    height: 90vh

.panel
    backgroundrgb(255, 148, 148);
    height: 10rem
    width: 30%;

.muo-text
    font-size: 3em
    font-weightbolder
    font-family: 'FranklinGothicMedium', 'ArialNarrow',Arialsans-serif
    positionabsolute

Здесь видно, что свойство body background стилизуется независимо от свойства .panel background

Свойство background также принимает градиенты:

bodybackgroundlinear-gradient(90degrgba(234,233,255,1) 0%,rgba(252,167,213,1) 35%,rgba(194,245,255,1) 100%);

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

Что если вы хотите, чтобы фоном было изображение, а не сплошной цвет или градиент? Сокращенное свойство background – знакомый друг

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

bodybackgroundurlleaves-and-trees.jpg

Ого! Похоже, что изображение слишком сильно увеличено. Вы можете исправить это с помощью свойства background-size

bodybackgroundurlleaves-and-trees.jpg);
 background-sizecover

Чтобы использовать сокращенное свойство background в сочетании со свойством background-size cover , вы должны также указать свойства background-position и разделить значения обратной косой чертой (даже если это позиционные значения по умолчанию, такие как top left )

bodybackgroundurlleaves-and-trees.jpgtopleftcover

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

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

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

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

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

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

Об авторе

Алексей Белоусов

Привет, меня зовут Филипп. Я фрилансер энтузиаст . В свободное время занимаюсь переводом статей и пишу о потребительских технологиях для широкого круга изданий , не переставая питать большую страсть ко всему мобильному =)

Комментировать

Оставить комментарий