Здравствуйте, в задании код работает верно, но когда я создаю документы на компьютере возникают проблемы:
- в браузерах мозила и хром не видно separator - он, почему-то находится под картинками (хотя z-index стоит верно)
- в мозиле проблема решается путем удаления z-index у фотографий (а сепаратору оставить, но можно тоже удалить)
2.1 проблема так же решается с установкой мелких z-index (картинкам z-index: 1 и 2, а сепаратору z-index: 3;
2.2 у хрома с такими же манипуляциями сепаратор тоже появляется, но там другая проблема (в пункте 3) - в хроме не применяются стили (до-после), а именно отображается картинка только “до” изменений
Пробовал отключать скрипты проблема с отображением сепаратора остается. Похоже дело в css.
[code]
Кекстаграм.toaster {
filter:
saturate(2.5)
hue-rotate(-30deg)
contrast(0.67)
sepia(0.4);
}
.kelvin {
filter:
contrast(1.1)
brightness(1.3)
saturate(2.4)
sepia(0.4);
}
.oldie {
filter:
contrast(2)
saturate(5)
hue-rotate(-180deg);
}
.willow {
filter:
saturate(0.02)
contrast(0.85)
brightness(1.2)
sepia(0.02);
}
.photos {
position: relative;
}
.photo,
.photo-original {
position: absolute;
width: 100%;
height: 100%;
background-size: cover;
}
.photo {
z-index: 10;
background-image: url(“img/spb-1.jpg”);
}
.photo-original {
z-index: 20;
width: 50%;
background-image: url(“img/spb-1.jpg”);
}
.separator {
position: absolute;
top: 50%;
left: 50%;
z-index: 30;
width: 30px;
height: 30px;
border: 2px solid #ffffff;
border-radius: 50%;
transform: translate(-50%, -50%);
}[/code]
если убрать или установить в
.photo z-index: 1;
.photo-original z-index: 2;
.separator: z-index: 3;
то сепаратор отображается. А с включенными скриптами в мозиле код работает, а в хром нет: в хроме ползунок бегает но фильтры не применяет.
А вот Хром не работает из-за того, что -webkit- нужно ему