• Теория
  • Теория

Испытание: CAT Academy

В последнем испытании нужно собрать постер группы «CAT Academy». Адреса картинок и небольшая подсказка есть в комментариях в CSS-коде.

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

Множественные фоновые изображения — это очень просто. Берёте знакомое свойство background и перечисляете в нем картинки через запятую. Например:


background:
  url("img1.png") no-repeat 0 0,
  url("img2.png") repeat-x 50% 50%,
  url("img3.png");

В этом примере у элемента будет 3 фоновых картинки. Причем картинка img3.png будет в нижнем слое, а img1.png в верхнем.

Решение

Решение испытания будет доступно через несколько минут. Используйте его, если возникнут сложности. А пока попытайтесь пройти испытание самостоятельно.

html,
body {
  margin: 0;
  padding: 0;
}

.block {
  width: 300px;
  height: 300px;
  background-color: #3498db;
}

.bg {
  height: 300px;
  background: url("cat_fish_128.png") no-repeat 90px 145px,
    url("cat_grumpy_128.png") no-repeat 15px 125px,
    url("cat_drunk_128.png") no-repeat 160px 125px,
    url("cat_walk_128.png") no-repeat 80px 80px,
    url("cat_academy.png") no-repeat 20px 20px,
    url("star.png") repeat-x 0 10px,
    url("star.png") repeat-x 0 270px;
}
Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Фоны. Знакомство» тренажёра «Базовые механики стилизации» можно после регистрации и оформления подписки.