Фоны, часть 1, [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: #000 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 157% 50%;
}

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

/*
Используемые изображения:
/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
*/

1 лайк
2

Адрес картинки желательно в кавычках писать…

Мне было проще сделать в пикселях, чем в процентах…

.block4 {
background: #3498db url("/assets/course13/cat_walk.png") no-repeat 60px 50%;
}
3

спасибо, буду отныне в кавычках записывать, а проценты, это просто мне было удобнее сейчас так написать.

4

Не понимаю, зачем вам везде на конце 50%, если можно сделать так и будет тоже самое и на 100% 8-е:

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%}
.block2{background: #f1c40f url("/assets/course13/cat_poo.png") no-repeat 50%}
.block3{background: #e74c3c url("/assets/course13/cat_hiss.png") no-repeat 50%}
.block4{background: #3498db url("/assets/course13/cat_walk.png") no-repeat 60px}
.block5{background: #3498db url("/assets/course13/cat_walk.png") no-repeat -30px}
.block6{background: #27ae60 url("/assets/course13/cat_slippers.png") no-repeat 50%}
.block7{background: #bdc3c7}
.block8{background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px}
.block9{background: #bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -50px}
5

а в чём будет разница?

6
  1. Код компактнее, 2. Не нужно забивать 2 значения - особенно при -191%, 3. Берёт он всё равно по центру один отступ, а так ты указываешь двойной центр, это всё равно что два раза человеку сказать одно и тоже, толку от этого не прибавиться…
1 лайк
7

https://getinstance.info/articles/translations/a-primer-to-background-position-in-css/

1 лайк