Испытание: морской волк [24/33]


#1

Насколько мой вариант верен? 97% совпадения. и можно ли его довести до 100% идя этим путем.
Чисто визуально очень похоже, различия минимальны.
.portrait {
margin: auto;
padding: 30px;
width: 275px;
height: 275px;
border: 20px solid rgba(255, 255, 255, 0.4);
background: url(“img/eye-patch.svg”) no-repeat,
url(“img/keks-2.jpg”) no-repeat;
background-size:
45%,
110%;
background-position:
38% 32%;
border-radius: 50%;
background-origin:content-box;
background-clip: content-box;
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 35 fill;
}


#2

Не получается у меня ваш вариант довести, в процентах величину не подобрать.
Только так:
.portrait {
margin: auto;
/padding: 30px;/
width: 275px;
height: 275px;
border: 50px solid;
background: url(“img/eye-patch.svg”) no-repeat,
url(“img/keks-2.jpg”) no-repeat;
background-size:
46%, cover;
background-position: 35px 35px, 50% 50%;
border-radius: 50%;
/background-origin:content-box;/
background-clip: content-box;
border-image-source: url(“img/rope-frame.png”);
border-image-slice: 90 fill;
}
Может кто-то еще возьмётся.


#3

Получается, что решение было похожим, но не верным. Жаль, тема интересная, но нужно много практики.


#4

Где то я читал уже что в процентах тяжело подобрать размеры т.к скачки там получаются, это надо чтоб все звезды сошлись изначально, и например проэкт был лично ваще где все идеально как вам надо:) ну лично мое мнение по данному случаю


#5

Спасибо за информацию. Запомню.


#6

Привет,

Замени свои значения на вот эти:

background-size: 80px, cover;
background-position: 35px 35px, center;


#7

Зачем?) Это что-то меняет?


#8

будет 100% совпадение


#9

У меня и так 100%.
А 50% 50 % и center - это одно и то же.


#10

background-size: 80px, cover; чтоб соблюсти доп. условие кратности 5)


#11

Ах это… Спасибо)


#12

И снова здравствуйте)
Ерунда какая-то с позиционированием картинок, у картинки кекса получилось -9px, каким образом, я так и не понял. Иначе он 100% не давал:hushed:

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


#13

Координаты background-position - это всегда два значения, а у вас одно. Выравнивание фоновой картинки с кексом - по центру.
Вы могли и сами подсмотреть ответ на свой вопрос в этой теме, чуть выше есть коды.


#14

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

}


#15

100%

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

#16

Подскажите кто-нибудь, по какому принципу подбирается ширина рамки border: 50px ??
Я изначально указала наобум 20px и в итоге совпало на 98%, дальше с параметрами кратными 5 не получилось… потом глунула комменты поменяла ширину на 50, убрала пару свойств и все совпало. Пересмотрела уроки, так и не поняла… кому не сложно, объясните пожалуйста, буду очень благодарна!