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

[Andrey_programmer]

Пытался сделать чисто подгонкой и удалось на 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;

}

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

[Ineska]

padding-top: 15px !important;

margin-left: 153px;

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

width: 275px;
height: 275px;

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

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

[inanutshell86]

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

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

[JeCos]

Вот какой код получился у меня, признаюсь, что размеры не брал с фотошопа, хотя это было намного проще
.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%

[Ineska]

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

[aquitan]

Методом подбора получилось вот так. Результат 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;
}

[Ineska]

margin-left: 138px;

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

[aquitan]

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

[Skyline404]

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

[Jane]

У меня тоже код как у 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 от фоновой картинки?

[DenisDolzhik]

Мучался, но кое-как сделал. Какие тут ошибки? Проблема в том, что в задании сказано, что все отступы кратны 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;
}

[allia]

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

[zeHbka]

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

[Valery_S]

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

[zeHbka]

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

[Valery_S]

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

[Ander]

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

[Ineska]

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

[Ander]

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

[Ineska]

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