Познакомьтесь с мощной, но простой в использовании функцией CSS – изменением цвета фона
Один из самых захватывающих моментов в карьере любого начинающего front-end разработчика – научиться изменять цвет фона веб-страницы
Работа с HTML – это здорово, но с помощью всего нескольких строк CSS вы можете заставить свои страницы и свой путь программиста расцвести
В этом руководстве мы расскажем обо всем, что вам нужно знать о том, как изменить цвет фона с помощью CSS
Приступайте к работе
Давайте проведем небольшую подготовительную работу
Примечание : Я рекомендую использовать Visual Studio Code с расширением Live Server для просмотра изменений в реальном времени по мере обновления HTML и CSS
- Создайте папку для файлов вашего проекта.
- Создайте файл index.html для размещения HTML. Вы можете использовать шаблонный код или просто установить несколько тегов <html> , <head> и <body>.
- Создайте файл styles.css для вашего CSS.
- Свяжите файл 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%);.
- HSLA : hsla(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 также принимает градиенты:
body
backgroundlinear-gradient(90degrgba(234,233,255,1) 0%,rgba(252,167,213,1) 35%,rgba(194,245,255,1) 100%);
Как изменить фоновое изображение в CSS
Что если вы хотите, чтобы фоном было изображение, а не сплошной цвет или градиент? Сокращенное свойство background – знакомый друг
Убедитесь, что изображение находится в той же папке, что и файлы HTML и CSS. В противном случае вам придется использовать путь к файлу внутри круглых скобок, а не только имя:
body
backgroundurlleaves-and-trees.jpg
Ого! Похоже, что изображение слишком сильно увеличено. Вы можете исправить это с помощью свойства background-size
body
backgroundurlleaves-and-trees.jpg);
background-sizecover
Чтобы использовать сокращенное свойство background в сочетании со свойством background-size cover , вы должны также указать свойства background-position и разделить значения обратной косой чертой (даже если это позиционные значения по умолчанию, такие как top left )
body
backgroundurlleaves-and-trees.jpgtopleftcover
Вот так! Фоновое изображение правильного размера в одной строке CSS
Читать далее: Как установить фоновое изображение в CSS
Примечание : Остерегайтесь включать большие фоновые изображения, которые занимают много места в памяти. Их может быть трудно загружать на мобильных устройствах, где у вас есть всего две секунды, чтобы дать пользователям повод задержаться на странице
Улучшите свою CSS-игру с помощью CSS box-shadow
Для таких разработчиков, как вы, свойства background-color и background-image – старая новость. К счастью, всегда можно узнать что-то новое
Попробуйте придать вашим полям дополнительный импульс с помощью CSS box-shadow. Ваши HTML-элементы еще никогда не выглядели лучше!
Комментировать