Испытание: CAT Academy [16/16]. Мое решение на 100% и подробная инструкция.

В задании сказано, что задачу можно решить двумя способами.

Я выбрал второй т.е с использованием множественных фоновых изображений. На мой взгляд используя этот вариант решения получается более короткий код. Так же в задании сказано, что адреса картинок и небольшая подсказка есть в комментариях в CSS-коде. Небольшая подсказка (помимо той, что все координаты кратны либо 5, либо 10), - это порядок наложений изображений, именно в таком порядке как указаны адреса картинок и нужно писать CSS-свойства для background.

Итак приступим. В HTML-кода мы видим контейнер :package: div с классом block - это наш синий прямоугольник. Внутри него находится еще один контейнер с классом bg, именно для него мы и будем применять множественные фоновые изображения. Вначале может показаться, что лучше всего начать с позиционирования звездочек, нежели с котиков, но это не так. Нужно определить какое изображение находится поверх всех остальных, его и нужно позиционировать первым.

Для этого достаточно воспользоваться подсказкой. Первой в списке адресов изображений идет картинка котика с рыбкой:

Адреса картинок:
> /assets/course13/cat_fish_128.png - нужно позиционировать первой, а дальше по списку вниз.
/assets/course13/cat_grumpy_128.png
/assets/course13/cat_drunk_128.png
/assets/course13/cat_walk_128.png
/assets/course13/cat_academy.png
/assets/course13/star.png

Мой вариант решения:

.bg {
height: 300px;
background:
url("/assets/course13/cat_fish_128.png") no-repeat 90px 145px,
url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 125px,
url("/assets/course13/cat_drunk_128.png") no-repeat 160px 125px,
url("/assets/course13/cat_walk_128.png") no-repeat 80px 80px,
url("/assets/course13/cat_academy.png") no-repeat 20px 20px,
url("/assets/course13/star.png") repeat-x 0 10px,
url("/assets/course13/star.png") repeat-x 0 270px;
}

:point_up_2: Для решения данной задачи не нужно позиционировать с помощью %. Это не правильно. Используя такой подход, Вы никогда не сможете верстать pixel perfect, никогда не сможете точно позиционировать элементы. Для точного позиционирования используйте px, либо гриду (сетку), а % лучше всего использовать тогда, когда вам нужно разместить какой-то элемент строго по центру, либо разместить элемент на расстоянии относительно другого элемента размещение которого тоже задано в % относительно родители.

5 лайков

Хороший подход. Но его большой минус - это не читабельность. Решал эту задачу с дочкой, ей 10 лет.
Когда каждый блок описывал отдельно и вкладывал друг в друга, она легко понимала, кто выше, а кто ниже в слое и какие у слоя заданы параметры. Наглядно. Хотя в HTML код получается не очень красивым.

Небольшая подсказка для тех, кто только делает это задание: используйте комментарии! :package:
Мне очень помогло. Периодически убирая те или иные элементы в комментарий, сравнивать: правильно ли расположены те, что остались на изображении.