Испытание "Котокомикс"

monakabbaba · 14.Апрель.2016 03:29:35

Подскажите в чем ошибка.
.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 center;
}
.block2 {
background: #f1c40f url("/assets/course13/cat_poo.png") no-repeat center;
}
.block3 {
background: #e74c3c url("/assets/course13/cat_hiss.png") no-repeat center;
}
.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 center;
}
.block7 {
background: #bdc3c7;
}
.block8 {
background: #95a5a6 url("/assets/course13/cat_grumpy.png") no-repeat 41px;
}
.block9 {
background: #bdc3c8 url("/assets/course13/cat_grumpy.png") no-repeat -50px;
}
Выдает 99%

Ineska · 14.Апрель.2016 08:19:15

Обратите внимание, что фоновый цвет у блока7 и блока9 должен быть одинаковым, а у вас разный, всего одна последняя цифра не совпадает и цвет уже не тот.

monakabbaba · 14.Апрель.2016 12:30:15

Ах, Благодарю, был невнимателен)

Angel_X · 19.Август.2016 12:55:51

Рабочий код на 100% ни чего сложного, если покопаться с точностью.

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 -30px 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 41px 50%;
}

.block9{
background:#bdc3c7 url("/assets/course13/cat_grumpy.png") no-repeat -50px 13px;
}
/*
Используемые изображения:
/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
*/

JohnnyJO · 17.Январь.2017 09:14:16

Сделал на 91%, заморачиваться с точностью было лень, решил воспользоваться вашим вариантом и вообще просел результат)

nikewalce · 21.Март.2017 15:28:06

Вот 100%

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

.block2{
background: #f1c40f url("/assets/course13/cat_poo.png") no-repeat 13px 13px;
}

.block3{
background: #e74c3c url("/assets/course13/cat_hiss.png") no-repeat 13px 13px;
}

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

.block5{
background: #3498db url("/assets/course13/cat_walk.png") no-repeat -30px 13px;
}

.block6{
background: #27ae60 url("/assets/course13/cat_slippers.png") no-repeat 13px 13px;
}

.block7{
background: #bdc3c7
}

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

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

NataliSem · 27.Март.2017 14:34:27

объясните,пожалуйста, это пиксели?как они рассчитываются?

Nurzadakhan · 03.Июль.2017 10:47:29

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) center no-repeat;
}

.block2{background: #f1c40f url(/assets/course13/cat_poo.png) center no-repeat;
}
.block3{background: #e74c3c url(/assets/course13/cat_hiss.png) center no-repeat;
}
.block4{background: #3498db url(/assets/course13/cat_walk.png) 60px center  no-repeat;
}
.block5{background: #3498db url(/assets/course13/cat_walk.png) -30px center no-repeat;
}
.block6{background: #27ae60 url(/assets/course13/cat_slippers.png) center no-repeat;
}
.block7{background: #bdc3c7 url() 10px 10px no-repeat;
}
.block8{background: #95a5a6 url(/assets/course13/cat_grumpy.png) 41px center no-repeat;
}
.block9{background: #bdc3c7 url(/assets/course13/cat_grumpy.png) -50px center no-repeat;
}

/*
Используемые изображения:
/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
*/
Теперь
Ineska Спасибо вместо 40px поставил 41px 100% на .block8

Ineska · 03.Июль.2017 10:49:07

А в различиях что?

Alexey_Ivanov · 03.Июль.2017 10:54:07

.block8 - координата не 40px, а 41px;

Nurzadakhan · 03.Июль.2017 10:55:06

Спасибо

BenkiNew · 18.Октябрь.2017 09:26:43

для 100% результата и согласно пройденного материала!
/* .block8 {
background-position: 41px 50%;
}
*/
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-color: #000000;
background-image: url("/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block2 {
background-color: #f1c40f;
background-image: url("/assets/course13/cat_poo.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block3 {
background-color: #e74c3c;
background-image: url("/assets/course13/cat_hiss.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block4 {
background-color: #3498db;
background-image: url("/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-position: 60px 50%;
}
.block5 {
background-color: #3498db;
background-image: url("/assets/course13/cat_walk.png");
background-repeat: no-repeat;
background-position: -30px 50%;
}
.block6 {
background-color: #27ae60;
background-image: url("/assets/course13/cat_slippers.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block7 {
background-color: #bdc3c7;

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

Avin · 15.Апрель.2021 09:26:48

На 100%
body {
width: 300px;
margin: 0;
padding: 0;
padding-top: 15px;

font-size: 0;
text-align: center;
background-color: white;
}

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

background-color: black;
}
.block1 {
background-color: #000000;
background-image: url(“cat_poo.png”);
background-repeat: no-repeat;
background-position: center;
}
.block2 {
background-color: #f1c40f;
background-image: url(“cat_poo.png”);
background-repeat: no-repeat;
background-position: center;
}

.block3 {
background-color: #e74c3c;
background-image: url(“cat_hiss.png”);
background-repeat: no-repeat;
background-position: center;
}

.block4 {
background-color: #3498db;
background-image: url(“cat_walk.png”);
background-repeat: no-repeat;
background-position: 60px 13px;
}

.block5 {
background-color: #3498db;
background-image: url(“cat_walk.png”);
background-repeat: no-repeat;
background-position: -30px 13px;
}

.block6 {
background-color:#27ae60;
background-image: url(“cat_slippers.png”);
background-repeat: no-repeat;
background-position: center;
}

.block7 {
background-color: #bdc3c7;
}

.block8 {
background-color: #95a5a6;
background-image: url(“cat_grumpy.png”);
background-repeat: no-repeat;
background-position: 41px 13px;
}

.block9 {
background-color: #bdc3c7;
background-image: url(“cat_grumpy.png”);
background-repeat: no-repeat;
background-position: -50px 13px;
}

Shapogolik · 25.Май.2021 09:22:46

.block1 {
background: #000 url(“cat_poo.png”) no-repeat 50% 50%;}
.block2 {
background: #f1c40f url(“cat_poo.png”) no-repeat 50% 50%;}
.block3 {
background: #e74c3c url(“cat_hiss.png”) no-repeat 50% 50%;}
.block4 {
background: #3498db url(“cat_walk.png”) no-repeat 60px}
.block5 {
background: #3498db url(“cat_walk.png”) no-repeat -30px}
.block6 {
background: #27ae60 url(“cat_slippers.png”) no-repeat 50% 50%}
.block7 {
background: #bdc3c7;}
.block8 {
background: #95a5a6 url(“cat_grumpy.png”) no-repeat 41px 50%}
.block9 {
background: #bdc3c7 url(“cat_grumpy.png”) no-repeat -50px;}

Shapogolik · 25.Май.2021 09:24:36

На глаз ли бо в специальных графических редакторах. Дизайнеры делают картинку, а вы уже смотрите на какое расстояние нужно вставить фигуру, что бы получилась данная картинка в веб-браузере

ZiloK45 · 26.Январь.2022 22:42:33

body {
  width: 300px;
  margin: 0;
  padding: 0;
  padding-top: 15px;

  font-size: 0;
  text-align: center;
  background-color: white;
}

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

  background-color: black;
}
.block1{
  background:#000000 url("cat_poo.png") no-repeat 50%;
}
.block2{
  background:#f1c40f url("cat_poo.png") no-repeat 50% 50%;
}
.block3{
  background:#e74c3c url("cat_hiss.png") no-repeat center center;
}
.block4{
  background:#3498db url("cat_walk.png") no-repeat 60px 50%;
}
.block5{
  background:#3498db url("cat_walk.png") no-repeat -30px 50%;
}
.block6{
  background:#27ae60 url("cat_slippers.png") no-repeat center center;
}
.block7{
  background:#bdc3c7;
}
.block8{
  background:#95a5a6 url("cat_grumpy.png") no-repeat 41px;
}
.block9{
  background:#bdc3c7 url("cat_grumpy.png") no-repeat -50px;
}

AlexMebel · 11.Февраль.2022 10:58:25

100 % на 11.02.2022

.block1 {
  background: #000000 url('cat_poo.png') no-repeat 50% 50%;
}
.block2 {
  background: #f1c40f url('cat_poo.png') no-repeat 50% 50%;  
}
.block3 {
  background: #e74c3c url('cat_hiss.png') no-repeat 50% 50%;
}
.block4 {
  background: #3498db url('cat_walk.png') no-repeat 60px 50%; 
}
.block5 {
  background: #3498db url('cat_walk.png') no-repeat -30px 50% 
}
.block6 {
  background: #27ae60 url('cat_slippers.png') no-repeat 50% 50%; 
}
.block7 {
 background-color: #bdc3c7; 
}
.block8 {
  background: #95a5a6 url('cat_grumpy.png') no-repeat 41px 50%; 
}
.block9 {
  background: #bdc3c7 url('cat_grumpy.png') no-repeat -50px 50% 
}

mr.lowland · 17.Март.2022 12:17:13

body {
  width: 300px;
  margin: 0;
  padding: 0;
  padding-top: 15px;

  font-size: 0;
  text-align: center;
  background-color: white;
}

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

  background-color: black;
}

.block1 {
background-image: url("cat_poo.png");
background-repeat: no-repeat;
background-position: 50% 50%;
}
.block2 {
  background-image: url("cat_poo.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #f1c40f;
}
.block3 {
  background-image: url("cat_hiss.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #e74c3c;
}
.block4 {
  background-image: url("cat_walk.png");
  background-repeat: no-repeat;
  background-position: 60px 50%;
  background-color: #3498db;
}
.block5 {
  background-image: url("cat_walk.png");
  background-repeat: no-repeat;
  background-position: -30px 50%;
  background-color: #3498db;
}
.block6 {
  background-image: url("cat_slippers.png");
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-color: #27ae60;
}
.block7 {
  background-color: #bdc3c7;
}
.block8 {
  background-image: url("cat_grumpy.png");
  background-repeat: no-repeat;
  background-position: 41px 50%;
  background-color: #95a5a6;
}
.block9 {
  background-image: url("cat_grumpy.png");
  background-repeat: no-repeat;
  background-position: -50px 13px;
  background-color: #bdc3c7;
}

100%

Skillnanyle · 11.Июль.2022 16:38:47

.block.block1 {
background-image: url(“cat_poo.png”);
background-repeat: no-repeat;
background-position: center;
}

.block.block2 {
background-image: url(“cat_poo.png”);
background-repeat: no-repeat;
background-position: center;
background-color: #f1c40f;
}

.block.block3 {
background-image: url(“cat_hiss.png”);
background-repeat: no-repeat;
background-position: center;
background-color: #e74c3c;
}

.block.block4 {
background-image: url(“cat_walk.png”);
background-repeat: no-repeat;
background-position: 60px;
background-color: #3498db;
}

.block.block5 {
background-image: url(“cat_walk.png”);
background-repeat: no-repeat;
background-position: -30px;
background-color: #3498db;
}

.block.block6 {
background-image: url(“cat_slippers.png”);
background-repeat: no-repeat;
background-position: center;
background-color: #27ae60;
}

.block.block7 {
background-color: #bdc3c7;
}

.block.block8 {
background-image: url(“cat_grumpy.png”);
background-repeat: no-repeat;
background-position: 41px;
background-color: #95a5a6;
}

.block.block9 {
background-image: url(“cat_grumpy.png”);
background-repeat: no-repeat;
background-position: -50px;
background-color: #bdc3c7;
}

NatashaArt · 28.Август.2022 09:34:29

body {
  width: 300px;
  margin: 0;
  padding: 0;
  padding-top: 15px;

  font-size: 0;
  text-align: center;
  background-color: white;
}

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

  background-color: black;
}
.block1{
  background:#000000 url("cat_poo.png") no-repeat center;
}
.block2{
  background:#f1c40f url("cat_poo.png") no-repeat center;
}
.block3{
  background:#e74c3c url("cat_hiss.png") no-repeat center;
}
.block4{
  background:#3498db url("cat_walk.png") no-repeat 60px 13px;
}
.block5{
   background:#3498db url("cat_walk.png") no-repeat -30px 13px;
}
.block6{
  background:#27ae60 url("cat_slippers.png") no-repeat center;
}
.block7 {
background-color: #bdc3c7;
}

.block8 {
background:#95a5a6 url("cat_grumpy.png") no-repeat 41px 13px 
}

.block9 {
background:#bdc3c7 url("cat_grumpy.png") no-repeat -50px
}