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

EvilNeighbor89 · 23.Август.2017 13:14:57

.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

}
наверное повтор) но у меня также вышло 100%

Skladnayazebra · 28.Август.2017 11:42:34

Здравствуйте.

После выполнения этого задания и нажатия на кнопку «Проверить» зависает анимация на голубом статус-баре справа от кнопки, и ничего не происходит, сколько бы я ни ждал. Обновляю страницу - тратится попытка. Нажимаю на кнопку снова - статус-бар снова зависает.

CSS-код:

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

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

.bg {
    height: 300px;
    background:
        url("/assets/course13/cat_fish_128.png") no-repeat 90px 150px,
        url("/assets/course13/cat_grumpy_128.png") no-repeat 15px 130px,
        url("/assets/course13/cat_drunk_128.png") no-repeat 160px 130px,
        url("/assets/course13/cat_walk_128.png") no-repeat 80px 85px,
        url("/assets/course13/cat_academy.png") no-repeat 20px 25px,
        url("/assets/course13/star.png") repeat-x 0px 15px,
        url("/assets/course13/star.png") repeat-x 0px 275px;
}

Windows 10, Google Chrome.

Помогите, пожалуйста.

Ineska · 28.Август.2017 12:12:05

Анимация не зависает. Просто это означает, что ваш код не дотягивает до зеленого статуса проверки. Посмотрите на вкладку “Различия”.

Skladnayazebra · 29.Август.2017 02:08:52

Блин, точно! По горизонтали у меня всё ровно, а по вертикали все изображения были ниже на 5 пикселей!
Спасибо, исправил. Теперь 100%.
Буду внимательнее.

Alex_Fduch · 16.Январь.2018 19:12:50

Что вы знаете про ~~callback hell~~, ~~fireball style~~?
Подумал и решил задачу именно этим стилем. Мне показался он самый просто и наглядный.

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

.star-top {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 10px;
}

.star-bottom {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 270px;
}

.academy {
    background-image: url("/assets/course13/cat_academy.png");
    background-repeat: no-repeat;
    background-position: 20px 20px;
}

.walk {
    background-image: url("/assets/course13/cat_walk_128.png");
    background-repeat: no-repeat;
    background-position: 80px 80px;
}

.bg {
    height: 300px;
}

.grumpy {
    background-image: url("/assets/course13/cat_grumpy_128.png");
    background-repeat: no-repeat;
    background-position: 15px 125px;      
}

.drunk {
    background-image: url("/assets/course13/cat_drunk_128.png");
    background-repeat: no-repeat;
    background-position: 160px 125px;  
}

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

Yaroslav-sh · 21.Март.2018 08:38:36

100% альтернативное прохождение

.bg {
height: 300px;
background: url("/assets/course13/cat_fish_128.png") no-repeat 52.5% 84.5%,
url("/assets/course13/cat_grumpy_128.png") no-repeat 9% 72.5%,
url("/assets/course13/cat_drunk_128.png") no-repeat 93% 72.5%,
url("/assets/course13/cat_walk_128.png") no-repeat 46.5% 46.5%,
url("/assets/course13/cat_academy.png") no-repeat 40% 9%,
URL("/assets/course13/star.png") repeat-x 0 3.5%,
url("/assets/course13/star.png") repeat-x 0 96.5%;
}

Nikko380 · 20.Апрель.2018 13:46:29

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

}

Enisey · 11.Октябрь.2018 14:16:33

Фишка то не в том, чтобы угадать параметры position. Там в задании изначально указаны параметры 5 либо 10. Что это за величины и как их применять? Видимо там есть фокус с тем, что каждую картинку нужно выставить по параметру bottom, top и т.п. и к ним добавлять опцию 5 либо 10 ???

Tala · 11.Октябрь.2018 16:33:10

вообще-то в задании указано кратно 5 либо 10.

Enisey · 12.Октябрь.2018 10:27:04

ну и что это за кратность?

Tala · 12.Октябрь.2018 12:29:23

270 делится на 5 без остатка. и на 10 тоже. Это и называется кратность. Проходится в начальной школе сразу после таблицы умножения.

Valery_S · 12.Октябрь.2018 23:39:59

И 0 тоже делится (правда 0 на всё делится, но это ему не мешает быть кратным 5 и 10)

BinoFaata · 16.Апрель.2020 11:43:15

Это новый 100% результат, может кому поможет. У меня просто были сложности, а актуальную информацию я не нашел, все устаревшее.
`.bg {
height: 300px;
background:

url(‘cat_fish_128.png’) no-repeat 90px 145px ,
url(‘cat_drunk_128.png’) no-repeat 160px 125px,
url(‘cat_grumpy_128.png’) no-repeat 15px 125px,
url(‘cat_walk_128.png’) no-repeat 80px 80px,
url(‘cat_academy.png’) no-repeat 40% 20px,
url(‘star.png’) repeat-x 0 10px,
url(‘star.png’) repeat-x 0 270px;
}`

guest_IT · 29.Май.2020 04:45:33

Сначала все сделал в процентах, но получалось на 91%. решил в некоторых местах заменить проценты на px. 100%

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

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

.bg {
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 93% 125px,
url(“cat_walk_128.png”) no-repeat 80px 80px,
url(“star.png”) repeat-x 20px 270px,
url(“cat_academy.png”) no-repeat 40% 20px,
url(“star.png”) repeat-x 50% 10px;
height: 300px;
}

KonstantinShmarin · 26.Июнь.2020 10:31:12

Доброго дня! Одним вариантом задание решено. Все понятно. Попробовал другим способом, так оно вообще не ставит фоны, что не так?

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

.bg {
    height: 300px;
}

.star-top {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 10px;
}

.star-bottom {
    background-image: url("/assets/course13/star.png");
    background-repeat: repeat-x;
    background-position: 0 270px;
}


  <!DOCTYPE html>
  <html lang="ru">
   <head>
    <meta charset="utf-8">
    <title>Испытание: CAT Academy</title>
    <link rel="stylesheet" href="style.css">
     </head>
        <body>
        <div class="block">
         <div class="bg">
         <div class="star-top"></div>
         <div class="star-bottom"></div>
    </div>
   </body>
</html>

Eleven · 30.Июнь.2020 09:05:41

Добрый день!
У контейнеров для звёзд не указана высота, поэтому мы не видим отображения фонов. Обратите внимание, что при таком подходе нужно рассчитывать позиции для фонов, исходя из размеров этих контейнеров.

BorysAltynnyk · 28.Август.2020 20:26:25

Я тоже не понял и наговнокодил вот так)

sativa · 29.Сентябрь.2020 14:56:36

.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 0px 270px;

tedrax · 30.Сентябрь.2020 12:36:44

Получилось подобрать в процентах

.bg { height: 300px; background: url(“cat_fish_128.png”) no-repeat 52.5% 84.5%, url(“cat_grumpy_128.png”) no-repeat 8.5% 72.5%, url(“cat_drunk_128.png”) no-repeat 93% 72.5%, url(“cat_walk_128.png”) no-repeat 46.5% 46.5%, url(“cat_academy.png”) no-repeat 40% 9%, url(“star.png”) repeat-x 0 96.5%, url(“star.png”) repeat-x 0 3.5%;

prostoUser · 04.Март.2021 12:32:35

Не очень сложное испытание. Хотя размещание “звездочек” потребовали много времени.
Начинала позиционирование с процентов, но пиксели оказались более подходящими.

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