我们如何使用 javascript DOM 改变背景图像的线性渐变？答案

【问题标题】：How do we change linear-gradient of background image using javascript DOM?我们如何使用 javascript DOM 改变背景图像的线性渐变？
【发布时间】：2020-07-05 12:44:29
【问题描述】：

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 事件改变背景图像的渐变。这不起作用。

【问题讨论】：

标签： javascript html css dom linear-gradients

【解决方案1】：

我相信你错过了``仅此而已

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>

【讨论】：

非常感谢！我整天都在挠头

【解决方案2】：

你可以试试：

  var element = document.querySelector('.class');//The class of your element
    var change = document.querySelector ('.stepPre p');

element.addEventListener('click', function FUNCTIONNAME(){
    change.innerHTML = 'here you change the p of .stepPre';
    change.style.backgroundImage = 'linear-gradient(-120deg, #75d9e0,#5ddfff)';
  })

【讨论】：