Основы CSS: использование нескольких фонов

Ромчик
0

Доброго времени суток. Немного хочу отвлечься от программирования и написать статью по 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;

}

Вот, что получилось

Background color

Пока ничего интересного.

А давайте сделаем в качестве фона изображение. Меняем наш 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 мы можем спокойно одновременно задавать несколько фоновых изображений, накладывать на них градиент.

И главное помните, что:

  • Порядок стекирования нескольких фонов происходит сверху вниз.
  • Градиенты применяются через фоновое изображение, поэтому их можно использовать как часть всего этого.
Понравилась статья? Поделись с друзьями.
  • Add to favorites
  • Добавить ВКонтакте заметку об этой странице
  • Twitter
  • Facebook
  • Мой Мир
  • LiveJournal
  • Одноклассники
  • Блог Я.ру
  • MySpace
  • FriendFeed
  • В закладки Google
  • Google Buzz
  • Яндекс.Закладки
  • Reddit
  • StumbleUpon
  • Technorati
  • del.icio.us
  • БобрДобр
  • LinkedIn
  • Memori.ru
  • Сто закладок
  • Blogger
CSS

©2012-2018 По всем вопросам обращайтесь через форму обратной связи

Яндекс.Метрика