8/16 100%

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

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}
.block1 {
background:#000000 url("/assets/course13/cat_poo.png") no-repeat 50% 50%;
}
.block2 {
background:#f1c40f url("/assets/course13/cat_poo.png") no-repeat 50% 50%
}
.block3 {
background:#e74c3c url("/assets/course13/cat_hiss.png") no-repeat 50% 50%
}
.block4 {
background:#3498db url("/assets/course13/cat_walk.png") no-repeat 230% 50%
}
.block5 {
background:#3498db url("/assets/course13/cat_walk.png") no-repeat -115% 50%
}
.block6 {
background:#27ae60 url("/assets/course13/cat_slippers.png")no-repeat 50% 50%
}
.block7 {
background:#bdc3c7
}
.block8 {
background:#95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 158% 50%
}
.block9 {
background:#bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -192% 50%
}

2

Целесообразнее было использовать px вместо таких больших величин.

3

почему? в чем разница?

4

Разницы особо нет, просто в испытаниях обычно говорится о кратности пяти. Величина в процентах не соответствует этому правилу.

5

В последнем задании действительно не получается сделать ровные цифры, и кратные 5 тоже ) я добирала по 1 пикселю. получилось вот так

.block8 {
background:#95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px 50%;
}
.block9 {
background:#bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -50px 50%;
}

Вот из-за 1 пикселя в 8 блоке, все время было 98%, добавила пиксель сразу все совпало.

3 лайка
6

Один в один. Много пробовал в процентах попасть, думал не закрою на 100%. На последних двух попытках попал в нужное число.

.block8 {
    background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px 50%;
}

.block9 {
    background: #bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -50px 50%
7

Может кому пригодится

body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;
font-size: 0;
text-align: center;
background: white;
}

.block {
display: inline-block;
width: 90px;
height: 90px;
margin-bottom: 1px;
margin-right: 1px;
background-color: black;
}

/*
Используемые изображения:
/assets/course13/cat_poo.png
/assets/course13/cat_hiss.png
/assets/course13/cat_walk.png
/assets/course13/cat_slippers.png
/assets/course13/cat_grumpy.png
*/
.block1{
background: #000000 url(/assets/course13/cat_poo.png) no-repeat 50% 50%;
}
.block2{
background: #f1c40f url(/assets/course13/cat_poo.png) no-repeat 50% 50%;
}
.block3{
background: #e74c3c url(/assets/course13/cat_hiss.png) no-repeat 50% 50%;
}
.block4{
background: #3498db url(/assets/course13/cat_walk.png) no-repeat 65px 50%;
}
.block5{
background: #3498db url(/assets/course13/cat_walk.png) no-repeat -25px 50%;
}
.block6{
background: #27ae60 url(/assets/course13/cat_slippers.png) no-repeat 50% 50%;
}
.block7{
background: #bdc3c7;
}
.block8{
background: #95a5a6 url(/assets/course13/cat_grumpy.png) no-repeat 40px 50%;
}
.block9{
background: #bdc3c7 url(/assets/course13/cat_grumpy.png) no-repeat -50px 50%;
}

8

.block8
{
background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 40px 50%;
}

98%

.block8
{
background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px 50%;
}

100%

9

97% решил вот так, не вижу ошибок.

10

Я посмотрела ваш код.
На самом деле тут лучше делать было в px, чем в %

.block5{
background: url("/assets/course13/cat_walk.png") no-repeat #3498db -120%
}

Исправила на: 115%

.block8{
background: url("/assets/course13/cat_grumpy.png") no-repeat #95a5a6 160%
}

.block9{
background: url("/assets/course13/cat_grumpy.png") no-repeat #bdc3c7 -190%
}

Исправила на: 156% и 194% соответственно.
Все, 100% вышло.