Фоны, часть 1 / Несколько фонов [13/16]
×

Несколько фонов [13/16]

Несколько фонов одному элементу можно задать с помощью множественных фонов. Это достаточно новая возможность CSS3, и мы рассмотрим её в продвинутых курсах.

А сейчас рассмотрим старую надёжную технику создания нескольких фонов.

Суть техники заключается в том, что мы вкладываем элементы друг в друга и делаем их одинакового размера, а затем каждому элементу задаём свой фон. Т.е. каждый элемент служит одним слоем фона.

Фоны вложенных элементов перекрывают друг друга: чем глубже элемент, тем выше его фон.

Кстати, для удобства ширину лучше задавать внешнему элементу (т.к. все вложенные будут той же ширины), а высоту самому глубокому, т.к. он растянет по высоте всех своих родителей.


Выполнить задание
HTML
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="utf-8"> <title>Несколько фонов</title> </head> <body> <div class="block1"> <div class="block2"> <div class="block3"></div> </div> </div> </body> </html>
CSS
body { padding-top: 80px; } .block1 { width: 256px; margin: 0 auto; box-shadow: 1px 1px 3px #999999; } .block2 { } .block3 { height: 256px; }
HTML Academy

Соберём миниатюру «Кот на ферме». Задайте неповторяющиеся фоновые картинки:

  1. /assets/course13/cows.jpg — 1 блоку,
  2. /assets/course13/cat_walk.png — 2 блоку, позиция фона 190px 195px,
  3. /assets/course13/fence.png — 3 блоку.
Теория Проверить Следующее задание
Идёт запись на курс Базовый HTML и CSS #16, который стартует 16 января.

Обсуждение и комментарии

Если у вас возникли сложности при прохождении задания, то вы можете обратиться за помощью на наш форум. Мы отслеживаем сообщения и постараемся ответить максимально быстро.

Пожалуйста, не пишите решение задач. Такие сообщения будут удаляться.

Перейти на форум или открыть комментарии.