24/30 Испытание морской Волк! 99% но много ошибок


#1

Пытался сделать чисто подгонкой и удалось на 99% но :

  1. Главный вопрос: рамка у меня если честно сказать получилась не идеально круглой. Почему? что я забыл дописать?

  2. мне пришлось полезть в body иначе рамка сдвигалась вверх. margin-top - не работал так как на результате картинка смещалась в белый фон

  3. для подгонки получилось так что у меня расстояния не кратны 5.

/*
Пути к изображениям

img/rope-frame.png
img/keks-2.jpg
img/eye-patch.svg

*/

body{

padding-top: 15px !important;}

.portrait {
width: 245px;
height: 245px;
background-image: url(“img/eye-patch.svg”),url(“img/keks-2.jpg”);
background-size: 80px, cover;
background-repeat: no-repeat;
background-position: 35px 35px,center;
background-clip: content-box;
border-radius: 50%;
margin-left: 153px;
margin-top: 0;
border: 35px solid black;
border-image: url(“img/rope-frame.png”);
border-image-slice: 63 fill;
border-image-outset: 15px;

}

  1. Опять косяк с Вашим отображением! Картинка на верхнем экране несовпадает с картинкой на результате. я ориентировался на поле РЕЗУЛЬТАТ. вот скрин!

#2

Это явно что-то не то. Вспоминайте, как центрируется блок по горизонтали.
Не надо менять размеры блока:

width: 275px;
height: 275px;

Сложность задания состоит в правильной подборке значений двух свойств. 100% получается только при:

border: 50px solid;
border-image-slice: 90 fill;

#3

Поделюсь своим алгоритмом поиска ответа.

  1. Сохраняю картинку с пиратом, открываю ее в фотошопе.
  2. Измеряю ее общие размеры. (здесь бы вы определили ширину/высоту в 275px, в т.ч. и ширину рамки 50px ).
  3. Дальше работа с изображением/рамкой, их свойствами, которые были изложены в материалах курса.
    P.S. Если пропустить шаг 2, то потом возникает много лишних телодвижений, напр. border-image-outset, margin-left и другие попытки “подогнать” по размерам.

#4

Вот какой код получился у меня, признаюсь, что размеры не брал с фотошопа, хотя это было намного проще
.portrait {
width: 275px;
height: 275px;
background: url(“img/eye-patch.svg”) no-repeat left 35px top 35px, url(“img/keks-2.jpg”) no-repeat 50% 50%;
background-size: 46%, cover;
background-clip: content-box;
margin: 0 auto;
border: 50px solid white;
border-radius: 50%;
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
}
Меня смущает только это - background-size: 46%, но результат все равно 100%


#5

Подберите в пикселях значение background-size.


#6

Методом подбора получилось вот так. Результат 100%
.portrait {
height: 275px;
width: 275px;
margin-left: 138px;
background: url(“img/eye-patch.svg”) no-repeat, url(“img/keks-2.jpg”) no-repeat;
background-size: 80px, cover;
background-position: 35px 35px, center;
border: 50px solid rgba(0, 0, 0, 0.4);
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
border-radius: 50%;
background-clip: content-box;
}


#7

Лучше сделайте выравнивание по горизонтали с помощью автоматических отступов.


#8

Ага, понял, спасибо!


#9

В огне лисе все нормально отображает)


#10

У меня тоже код как у aquitan:
portrait {
height: 275px;
width: 275px;
margin-left: 138px;
background: url(“img/eye-patch.svg”) no-repeat, url(“img/keks-2.jpg”) no-repeat;
background-size: 80px, cover;
background-position: 35px 35px, center;
border: 50px solid rgba(0, 0, 0, 0.4);
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
border-radius: 50%;
background-clip: content-box;
}

Только вот мне не понятно, почему без border-image-outset граница все равно за примерно 15px от фоновой картинки?


#11

Мучался, но кое-как сделал. Какие тут ошибки? Проблема в том, что в задании сказано, что все отступы кратны 5, но у меня иначе.

.portrait {
margin: 0 auto;
width: 275px;
height: 275px;
background-image: url(“img/eye-patch.svg”), url(“img/keks-2.jpg”);
background-repeat: no-repeat;
background-size: 80px , cover;
background-position: 35px 35px ,-9px 0;
background-origin: content-box;
background-clip: content-box;
border-radius: 50%;
border: 50px solid rgba(0,0,0, 0);
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
}


#12

У меня background-size: 80px, cover; и 100%


#14

Помогите пожалуйста разобраться с отображением.
Долго не могла разобраться с результатом, подумала что может в коде что не так, но посмотрев на форуме ответы, поняла что всё было так как надо, почему отображение результата не совпадает с примером?


#15

В border исправьте на rgba


#16

Спасибо большое, не заметила!)


#17

Я вообще не понимаю как цвет в border влияет на картинку.
Цвет можно вообще убрать и ничего не изменится.


#19

Люди добрые, мне вот интересно, тут все, проходя испытания, используют полученные знания из головы, или все же лезут как я в теорию пройденного курса? Часто чтобы пройти испытание, мне приходится по сути весь курс заново пройти и взять что-то из кода подобных промежуточных заданий. Вот и мучают сомнения: я один тут такой тупой или это вообще нормальная практика?)


#20

Это нормальная практика, вы не один.


#21

Спасибо! успокоили) а то я думаю может просто в 42 года уже мозгов не хватает все сразу запомнить.


#22

Возраст не является препятствием, есть и постарше.