решил я сделать простую задачу : Наложить Туман на картинку. Т.е. на любую случайную картинку прозрачный .PNG. Но есть
---------- условие --------------
HTML не трогать .
----------------------
Прописывать любые стили -- можно.
Стили через JS -- можно.
----------------------
Как видите , сами туманы наложены (или накладены) через JS. HTML я трогать не могу.
Половину стилей из JS можно перенести в <style>, это не принципиально. Проблема в высоте.
Проблема : не могу сделать мутному туману
height: 100%;
В коде видно, что div для тумана создается через JS , и приклеивается к объекту
<div id="wb_Image1"
Туман (2 штуки) с разной скоростью движутся в сторону. Размеры тумана любые (ширина), положение любое.
Одно требование : высота тумана = высоте контейнера картинки
"wb_Image1"
Понятно, что нельзя просто взять цифру
height:729px; . Ее можно получить только через JS
все это не работает. Я не понимаю этой проблемы .
fog.style.height = imageContainer.offsetHeight + 'px';
fog.style.height = imageContainer.offsetHeight;
fog.style.height = imageContainer.style.height + 'px';
fog.style.height = imageContainer.style.height;
background-size: cover;
background-size: contain;
У тумана высота 631рх и все, как прибито , размер не меняется.
Вот
CODEPEN
(возможно, есть что-то лишнее, я уже лепил все подряд везде где можно )
Расскажите, как сделать туману
height: 100%; ?
============== P.S.=====================
Нет смысла держать на CODEPEN ошибки и нерабочие предварительные варианты. Делаем рабочий CODEPEN, ошибка оставляем тут.
fog.style.background = `url("${backgroundUrl}") repeat-x`;
при такой записи впечатление , что все стили из <style> не применяются
.fog {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-size: cover;
pointer-events: none;
}
background-size: cover; -- точно не применялось.
Конечно, быть такого не может . Но интересно, о чем думает этот браузер, когда получает стили из JS.
