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

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

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

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

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

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

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

Хотите писать JavaScript, используя современный синтаксис (ES2015, ES2016, ES2017)? Уметь тестировать свои программы? Записывайтесь на продвинутый интенсив по JavaScript.

Выполнить задание
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 блоку.
Теория Проверить Следующее задание
Идёт запись на курс PHP, уровень 1 #6, который стартует 11 сентября.

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

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

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

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