Основы CSS: использование нескольких фонов
Доброго времени суток. Немного хочу отвлечься от программирования и написать статью по CSS, а точнее об использовании нескольких фонов (background). Как вы знаете, что в качестве бекграунда мы можем задать картинку, цвет. Но не многие знают, что мы можем в качестве фона задать как несколько картинок, так картинку и цвет. Давайте разберемся как это делать.
И так давайте рассмотрим пример.
У нас есть index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Несколько фонов</title> <link rel="stylesheet" type="text/css" href="css/style.css"> </head> <body> <div class="example"> </div> </body> </html>
И подключенные стили style.css
.example {
height: 200px;
width: 200px;
background: red;
}
Вот, что получилось
Пока ничего интересного.
А давайте сделаем в качестве фона изображение. Меняем наш css файл.
.example {
height: 200px;
width: 200px;
background-image: url(../img/left.png);
}
Но изображение продублировалось.
Но мы же знаем, что мы можем управлять изображением в фоне. Давайте уберем повторение.
.example {
height: 200px;
width: 200px;
background: url(../img/left.png) no-repeat;
}
Смотрим, что получилось:
Теперь давайте добавим второе изображение в фон. Для этого просто через запятую добавить еще одно изображение. И сразу сделаем выравнивание изображений.
.example {
height: 200px;
width: 200px;
background:
url(../img/left.png) left top no-repeat,
url(../img/right.png) right top no-repeat;
}
Как видите у нас в качестве фона уже два изображения. А давайте еще зададим затемнение с помощью черного градиента с прозрачностью.
.example {
height: 200px;
width: 200px;
background:
linear-gradient(
rgba(0, 0, 0, 0.45),
rgba(0, 0, 0, 0.45)
),
url(../img/left.png) left top no-repeat,
url(../img/right.png) right top no-repeat;
}
Как видите все довольно просто.
Вывод.
В CSS мы можем спокойно одновременно задавать несколько фоновых изображений, накладывать на них градиент.
И главное помните, что:
- Порядок стекирования нескольких фонов происходит сверху вниз.
- Градиенты применяются через фоновое изображение, поэтому их можно использовать как часть всего этого.
