1.1 Свойство background-color
Свойство background-color задает цвет фона для элемента. Оно позволяет установить цветовую заливку фона, обеспечивая визуальное разделение содержимого и улучшая восприятие текста и других элементов.
Значения:
- Названия цветов: можно использовать предопределенные названия цветов, такие как
red,blue,green - Шестнадцатеричные значения: например,
#ff0000,#00ff00,#0000ff - RGB: например,
rgb(255, 0, 0),rgb(0, 255, 0),rgb(0, 0, 255) - RGBA: например,
rgba(255, 0, 0, 0.5)(полупрозрачный красный) - HSL: например,
hsl(0, 100%, 50%),hsl(120, 100%, 50%),hsl(240, 100%, 50%) - HSLA: апример,
hsla(0, 100%, 50%, 0.5)(полупрозрачный красный).
Пример использования:
CSS
.color-red {
background-color: red;
}
.color-hex {
background-color: #3498db;
}
.color-rgba {
background-color: rgba(46, 204, 113, 0.7);
}
HTML
<body>
<div class="color-red">Этот элемент имеет красный фон.</div>
<div class="color-hex">Этот элемент имеет фон с цветом, заданным в шестнадцатеричном формате.</div>
<div class="color-rgba">Этот элемент имеет полупрозрачный зеленый фон.</div>
</body>
Объяснение кода:
background-color: red;: устанавливает красный фон для элементаbackground-color: #3498db;: устанавливает цвет фона с помощью шестнадцатеричного значенияbackground-color: rgba(46, 204, 113, 0.7);: устанавливает полупрозрачный зеленый фон с использованием RGBA
1.2 Свойство background-image
Свойство background-image задает фоновое изображение для элемента. Оно позволяет использовать изображения для создания визуально привлекательных фонов, улучшая дизайн и восприятие веб-страницы.
В качестве значения в него нужно передать URL изображения — указать путь к изображению, которое будет использоваться как фон. Например, url('./img/background.jpg').
Пример использования:
.background-url {
background-image: url('https://cdn.javarush.com/images/article/f6bda08b-3919-465c-9beb-f940a570cc72/1024.jpeg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-weight: 400;
color: white;
}
CSS
.background-url {
background-image: url('./img/background.jpg');
background-repeat: no-repeat;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
HTML
<body>
<div class="background-url">Этот элемент имеет фоновое изображение</div>
</body>
Объяснение кода:
background-image: url('./img/background.jpg');: устанавливает изображение в качестве фона для элемента. В данном случае используется относительный путь.
Преимущества использования background-image:
- Визуальная привлекательность: использование фоновых изображений позволяет создавать более визуально привлекательные и интересные веб-страницы.
- Контекст: фоновые изображения могут предоставлять дополнительный контекст или информацию, усиливая визуальное восприятие содержимого страницы.
- Брендинг: фоновые изображения могут быть частью брендинга, помогая поддерживать единый стиль и узнаваемость сайта.
Советы по использованию фоновых изображений:
- Оптимизация изображений: для улучшения производительности страницы важно оптимизировать изображения, уменьшая их размер без значительной потери качества
- Кроссбраузерная поддержка: убедитесь, что используемые изображения корректно отображаются во всех целевых браузерах
- Альтернативный текст: для изображений, которые имеют важное значение, следует предусмотреть альтернативные способы передачи информации, такие как текстовые описания, для пользователей с ограниченными возможностями
1.3 Совместное использование background-color и background-image
Свойства background-color и background-image могут использоваться вместе для создания сложных и привлекательных фонов. Например, можно установить цвет фона, который будет виден в случае, если фоновое изображение не загрузится, или использовать цветной фон в сочетании с полупрозрачным изображением.
Пример использования:
.combined-background {
background-color: lightblue;
background-image: url('https://cdn.javarush.com/images/article/f6bda08b-3919-465c-9beb-f940a570cc72/1024.jpeg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
font-family: "Roboto", sans-serif;"
font-weight: 400;
color: white;
}
CSS
.combined-background {
background-color: lightblue;
background-image: url('.img/background.jpg');
background-repeat: no-repeat;
background-position: center;
background-size: 610px 290px;
border: 2px solid #000;
width: 640px;
height: 320px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
HTML
<body>
<div class="combined-background">
Этот элемент имеет комбинированный фон с изображением и цветным фоном
</div>
</body>
Объяснение кода:
background-color: lightblue;: устанавливает цвет фона элементаbackground-image: url('.img/background.jpg');: устанавливает фоновое изображениеbackground-size: 610px 290px;: устанавливает размеры фонового изображенияbackground-position: center;: центрирует фоновое изображение внутри элементаborder: 1px solid #000;: добавляет рамку вокруг элемента для визуального выделенияwidth: 640px;height: 320px;: устанавливают размеры элементаcolor: white;: устанавливает цвет текстаdisplay: flex;align-items: center;justify-content: center;: центрирует текст внутри элемента
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ