[英]How do we change linear-gradient of background image using javascript DOM?
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")';
});
I wrote this EventListener function and want to change the gradient of my background image with mousemove event.我写了这个 EventListener 函数,想用 mousemove 事件改变我的背景图像的渐变。 This is not working.
这是行不通的。
I believe you missed the `` that's all我相信你错过了``仅此而已
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>
You can try :你可以试试 :
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)';
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.