Как изменить линейный градиент фонового изображения, используя javascript DOM? - PullRequest
Новая
       36

Как изменить линейный градиент фонового изображения, используя javascript DOM?

0 голосов
/ 25 марта 2020 
document.querySelector('.image').addEventListener('mousemove',(e)=>{

    document.querySelector('.image').style.backgroundImage = 'linear-gradient(to top,rgba(${e.offsetX},${e.offsetY},22,0.5),rgba(31, 22, 26, 0.8)), url("https://pics.freeartbackgrounds.com/fullhd/Morning_Sea_and_Boat_Background-318.jpg")';

});

Я написал эту функцию EventListener и хочу изменить градиент моего фонового изображения с помощью события mousemove. Это не работает.

1 Ответ

1 голос
/ 25 марта 2020

Я полагаю, вы пропустили `` это все 

window.onload = ()=> {
  document.querySelector('.image').addEventListener('mousemove',(e)=>{
    const style = `linear-gradient(to top right,rgba(${e.offsetX},${e.offsetY},22,0.5),rgba(31, 22, 26, 0.8))`;
    console.log(style);
    document.querySelector('.image').style.backgroundImage = style;
  });
}
<html>
  <head></head>
  <body>
    <image  width="200" height="200" class="image" src="" />
  </body>
</html>
...