- Теория
- Теория
Испытание: 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
Вы перешли на другую страницу
Кликните внутри мини-браузера, чтобы поставить фокус в это окно.