Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.10.2024, 19:16
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

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

Последний раз редактировалось seregadushka, 09.10.2024 в 16:56.
Ответить с цитированием
  #2 (permalink)  
Старый 08.10.2024, 22:07
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 505

В джаваскрипте замените строку
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}")`;

Последний раз редактировалось Белый шум, 08.10.2024 в 22:21.
Ответить с цитированием
  #3 (permalink)  
Старый 08.10.2024, 23:09
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

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

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

Последний раз редактировалось seregadushka, 08.10.2024 в 23:38.
Ответить с цитированием
  #4 (permalink)  
Старый 08.10.2024, 23:25
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

Профессор , спасибо еще раз за 3 варианта. 1 и 3 -- я даже такого синтаксиса не встречал. Очень пригодится.
Ответить с цитированием
  #5 (permalink)  
Старый 09.10.2024, 00:08
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

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

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

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

Последний раз редактировалось seregadushka, 09.10.2024 в 00:14.
Ответить с цитированием
  #6 (permalink)  
Старый 09.10.2024, 10:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,209

Сообщение от seregadushka
Почему не работает сокращенная запись -- не понятно.
Все предельно понятно - у свойств объекта нет "сокращенной" записи.
Ответить с цитированием
  #7 (permalink)  
Старый 09.10.2024, 15:15
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

Сообщение от ksa Посмотреть сообщение
Все предельно понятно - у свойств объекта нет "сокращенной" записи.
не надо подгонять свою теорию под правильный ответ, найденный ранее.
fog.style.background = `url("${backgroundUrl}") repeat-x`;
fog.style.animation = `fogMove ${animationDuration} linear infinite`;

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

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

Последний раз редактировалось seregadushka, 09.10.2024 в 16:50.
Ответить с цитированием
  #8 (permalink)  
Старый 09.10.2024, 21:10
Аватар для Белый шум
Профессор
Отправить личное сообщение для Белый шум Посмотреть профиль Найти все сообщения от Белый шум
 
Регистрация: 19.01.2012
Сообщений: 505

seregadushka,
Цитата:
The background shorthand CSS property sets all background style properties at once, such as color, image, origin and size, or repeat method. Component properties not set in the background shorthand property value declaration are set to their default values.
https://developer.mozilla.org/en-US/...CSS/background
Ответить с цитированием
  #9 (permalink)  
Старый 10.10.2024, 00:14
Аватар для Aetae
Тлен
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 6,583

Вообще это проще сделать через svg фильтр. Какой-нить displcenent map с наложением...
__________________
29375, 35
Ответить с цитированием
  #10 (permalink)  
Старый 10.10.2024, 00:46
Аватар для seregadushka
Аспирант
Отправить личное сообщение для seregadushka Посмотреть профиль Найти все сообщения от seregadushka
 
Регистрация: 10.07.2024
Сообщений: 47

Сообщение от Aetae Посмотреть сообщение
Вообще это проще сделать через svg фильтр. Какой-нить displcenent map с наложением...
интересно , как ? Я видел полноцвет в SVG, там размер картинки от 10 МБ.
Прозрачных туманов в SVG не встречал.

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Клик по картинке Димитр Events/DOM/Window 1 14.07.2024 13:48
Кликнуть по картинке src ? noveek Общие вопросы Javascript 11 01.09.2020 00:17
нужен обратный отчет времени на JS на картинке okapo Работа 3 20.01.2012 17:46
нужен обратный отчет времени на JS на картинке okapo AJAX и COMET 2 20.01.2012 04:39
Подсвечивание областей на картинке greatilya Элементы интерфейса 2 09.03.2010 14:42