Туман на картинке
 

решил я сделать простую задачу : Наложить Туман на картинку. Т.е. на любую случайную картинку прозрачный .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.

В джаваскрипте замените строку

fog.style.background = `url("${backgroundUrl}") repeat-x`;

на

fog.style['background-image'] = `url("${backgroundUrl}")`;

Тогда применится

background-size: cover;

из стиля. Либо просто сам стиль заменить на

background-size: cover !important;

Добавлено: или так -

fog.style.background = `center/cover url("${backgroundUrl}")`;

Профессор , Спасибо. Я не понимаю, какой !important , если он применяется к вновь созданному туману, а не к старой картинке из HTML.
Туман свежий, там нет старых стилей и переопределений.
Но этот !important работает !

Это повод сделать 3 туман.

Профессор , спасибо еще раз за 3 варианта. 1 и 3 -- я даже такого синтаксиса не встречал. Очень пригодится.

Профессор , с этим !important -- так и не ясно, зачем он

Но если продлить аналогию, работает более чистый способ -- разделение background по свойствам .
Почему не работает сокращенная запись -- не понятно.

fog.style.backgroundImage = `url("${backgroundUrl}")`;
fog.style.backgroundRepeat = 'repeat-x';

Все предельно понятно - у свойств объекта нет "сокращенной" записи.

не надо подгонять свою теорию под правильный ответ, найденный ранее.

fog.style.background = `url("${backgroundUrl}") repeat-x`;
fog.style.animation = `fogMove ${animationDuration} linear infinite`;

Это строки из оригинальной версии вопроса (ради красоты я исправил CODEPEN). Они и является сокращенной записью. Картинка определялась и повторялась правильно. Полная Анимация -- правильно.

По вашей логике сама fog.style.background -- это уже несуществующее свойство. Оно тоже "сокращенное" .

seregadushka,
https://developer.mozilla.org/en-US/...CSS/background

Вообще это проще сделать через svg фильтр. Какой-нить displcenent map с наложением...

интересно , как ? Я видел полноцвет в SVG, там размер картинки от 10 МБ.
Прозрачных туманов в SVG не встречал.

Здесь картинки fog.PNG по 1 МБ. PNG с альфа-каналом требует 32 bit .
Насколько я знаю, в PNG есть только настройка битности. А компрессии нет.
И так уже 631pх , не много, а размер 1 МБ.
Хотел 3 разных тумана, но с такими размерами ...

seregadushka, никто не говорит ни о каких картинках, с помощью фильтра можно нарисовать рандомные "облака" поверх картинки примерно так:

<svg width="0">
  <filter id="filter">
    <feTurbulence type="fractalNoise" baseFrequency=".01" numOctaves="10" />
  </filter>
</svg>

<style>
body { 
  margin: 0; 
  width: 100%;
  height: 100%;
  filter: url(#filter);
}
</style>

Остаётся "всего лишь" добавить прозрачность и анимацию, можно прям в самом svg.:)

да, получилось даже проще -- Fog-SVG

<feFuncA type="table" tableValues="0 1" />

эта строка отвечает за НЕпрозрачнось, от 0 до 1 . Но мы видим, что алгоритм практически не интересует эта настройка -- он не формирует полностью прозрачных участков .
как раз для тумана это , может , и нормально выглядит. Уже не надо 2-3-слойных туманов.

Но если кому хочется настоящих конкретных туманов, как после пожара, то только серьезное аналоговое Fog-PNG на 1 МБ.

Aetae , вцелом, спасибо, эти <filter> -- хорошая вещь.

seregadushka, можно сделать так tableValues="0 0 1" (или ещё больше нулей), чтоб было больше прозрачного.:)

Aetae,
да, действительно , матрица какая-то .
Я уже хотел забросить, как рисунок, далекий от реальности. Сделал SVG на память.
Но тут такая красота и легкость. Это уже полноценные облака.
Или вулканическое озеро в Исландии.
PNG заметно тормозит перемещение.
Очевидно, что <filter> более прогрессивная технология.
По крайней мере. анимироваnь PNG сразу не возможно, а вот у <filter> параметров немеряно.

Все , что смог, я добавил.
Перемещение -- это не анимация. Хорошо бы анимировать его клубы, чтобы они шевелились.
Жаль, не работает любая анимация самого тумана.

<animate attributeName="baseFrequency" 
             from="0.005" 
             to="0.1" 
             dur="1s" 
             repeatCount="indefinite" />

Других параметров не нашел.

seregadushka, вот тут предлагают подход с hue-rotate: https://stackoverflow.com/questions/...ear-continuous

Т.е. крутить цвета и превращать их в альфу, а не оставлять изначально сгенерированную альфу.