Основы 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 мы можем спокойно одновременно задавать несколько фоновых изображений, накладывать на них градиент.
И главное помните, что:
- Порядок стекирования нескольких фонов происходит сверху вниз.
- Градиенты применяются через фоновое изображение, поэтому их можно использовать как часть всего этого.