Ага, понял как сделано. Ковырять буду завтра. Спасибо!
|
Немного офтоп и про CSS, но может кто подскажет, может сам успею допереть. Всё прекрасно работает, картинки меняются красиво и плавно. Но свойство "background-size: cover;" не цепляется, я его уже и в инлайн к этому блоку и с !important и так и сяк, фоновая картинка не подстраивается под размер блока, а выводится того размера как она есть (она немного больше блока). Не знаю связано ли это с JS, но если вставить просто картинкой таких проблем нет. Казалось бы:
.sliderheader { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; z-index: 1; overflow: hidden; background-size: cover !important; background-repeat: no-repeat; background-position: center; backface-visibility: hidden; box-sizing: border-box; } .sliderheader:before { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; overflow: hidden; content: var(--src_before); background-size: cover !important; background-repeat: no-repeat; background-position: center; backface-visibility: hidden; box-sizing: border-box; } .sliderheader:after { z-index: -1; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: 0; overflow: hidden; content: var(--src_after); opacity: var(--opacity_after); background-size: cover !important; background-repeat: no-repeat; background-position: center; backface-visibility: hidden; box-sizing: border-box; } |
Ops,
не знаю, нужен специалист по css... |
Теоритически по моему понял :) , content: var(--src_before) в стилях псевдоэлементов after и before это не совсем тоже самое, что и background-image, а просто картинка выводящиеся по типу тега IMG, соответственно к нему не работают стили для background. Буду думать что с этим делать.
|
Ops,
попробуйте так ... display: block; background-image: var(--src_after); content: ""; display: block; background-image:var(--src_before); content: ""; |
Да, это решение проблемы :thanks:
|
Часовой пояс GMT +3, время: 00:33. |