Испытание: CAT Academy [16/16]

Курсы §12. Фоны
1

Выполнил задание на 100%, но интересует максимально лаконичный вариант, отличающийся от моего, если он есть. Уж больно много путацины эти фоны вызывают, особенно слои. Мой код:

HTML:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="utf-8">
    <title>Испытание: CAT Academy</title>
</head>
<body>
    <div class="block">
        <div class="stars">
            <div class="title">
                <div class="orange_cat">
                    <div class="gray_and_pink">
                        <div class="boss_cat">
                            <div class="bg"></div>
                        </div>    
                    </div>    
                </div>
            </div>
        </div>    
    </div>
</body>
</html>

CSS:

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

}

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

}

.bg {
height: 300px;

}

.stars {
background: url("/assets/course13/star.png") repeat-x 0 10px,
            url("/assets/course13/star.png") repeat-x 0 270px;

}

.title {
background: url("/assets/course13/cat_academy.png") no-repeat 20px 20px;

}

.orange_cat {
background: url("/assets/course13/cat_walk_128.png") no-repeat 80px 80px;

}

.gray_and_pink {
background: url("/assets/course13/cat_drunk_128.png") no-repeat 160px 125px,
            url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 125px;

}

.boss_cat {
background: url("/assets/course13/cat_fish_128.png") no-repeat 90px 145px;

}

PS: И ещё, зачем в коде заданы отступы для селектора по тегу “html”? Этот тег, как я знаю, обозначает всё содержимое документа, а визуально на странице мы видим только содержимое тега “body”, посему возникает вполне логичный вопрос. Если я спросил глупость, прошу разжевать на пальцах=)

2

Отступы не заданы, они обнулены. Это известная практика сброса стилей по умолчанию. Почитайте о normalize.css или css reset, если хотите разобрать подробнее этот момент.
На форуме есть другие варианты выполнения этого задания, когда в одном блоке-контейнере фоны наслаиваются друг на друга, перечисляются в одном свойстве background. Воспользуйтесь поиском, чтобы найти.

3

С кодом разобрался, спасибо! А насчёт отступов вопрос возник потому, что в предыдущих заданиях они обнулялись у “body”, а не у “html”, но в любом случае почитаю про это.

4

Более лаконичный вариант это вообще не менять HTML, а все картинки через запятую перечислить с координатами в селекторе .bg
Вы уже такое перечисление сделали через запятую в некоторых из ваших многочисленных селекторах, но почему бы не использовать только один класс и один селектор со всеми картинками. А порядок слоев определится очередностью в перечислении.

background:
url(“img1.png”) no-repeat 0 0,
url(“img2.png”) repeat-x 50% 50%,
url(“img3.png”);
В этом примере у элемента будет 3 фоновых картинки. Причем картинка img3.png будет в нижнем слое, а img1.png в верхнем. В множественных фоновых изображениях нельзя задавать фоновый цвет, поэтому он вынесен в отдельный блок.

6

.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;

}
вот намного более лаконичный вариант) HTML не тронут

1 лайк
7

Что я сделал не так?

8

Вероятно, порядок слоев. Звезды должны быть за котом.

1 лайк
9

да я понял уже, но все равно спасибо

10

:no_entry: :no_entry: :no_entry:Товарищи, ума не приложу, КАК вы узнали, что можно перечислить все 7 картинок в классе для одного дива, именно через ЗАПЯТУЮ, и чем выше фон в коде css, тем выше он на картинке? КАК вы догадались до этого? я не нашёл этого момента ни в одном уроке. ответьте пожалуйста люди добрые!:grinning:

11

В продвинутом курсе есть информация об этом: https://htmlacademy.ru/courses/88/run/6
Также никто не запрещает пользоваться другими источниками информации помимо теории к заданиям: https://webref.ru/layout/html5-css3/background/multiple