使用javascript向图像添加渐变

我正试图通过javascript向图像添加css渐变覆盖。但它不起作用。我做错了什么

此代码将只显示背景图像，而不显示渐变

$(document).ready(function() {
   $('html').css('background', 'url(images/image.jpg) no-repeat center center');
   $('html').css('background-size', 'cover');
   $('html').css('height', '100%');

   $('html:before').css('content', '');
   $('html:before').css('height', '100%');
   $('html:before').css('width', '100%');
   $('html:before').css('position', 'absolute');
   $('html:before').css('z-index', '-1');
   $('html:before').css('top', '0');
   $('html:before').css('left', '0');
   $('html:before').css('background', '-webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.07) 0%,rgba(3,3,3,0.07) 1%,rgba(68,68,68,0.25) 20%,rgba(63,63,63,1) 100%);');
}); 

这个css可以工作，但我需要用javascript来完成

html{
height: 100%;
background: url("../images/image.jpg") no-repeat center center;
background-size: cover;
}

html:before {
content: " ";
width: 100%;
height: 100%;
position: absolute;
z-index: -1;
top: 0;
left: 0;


background: -webkit-radial-gradient(center, ellipse cover,  rgba(0,0,0,0.07) 0%,rgba(3,3,3,0.07) 1%,rgba(68,68,68,0.25) 20%,rgba(63,63,63,1) 100%); 

}

---

我相信最好的方法就是创建一个html画布。 使用pimvdb的答案可以很好地做到这一点：

（）

---

希望这能有所帮助。

我相信，要完成您正在尝试的任务，最好的方法是创建一个html画布。 使用pimvdb的答案可以很好地做到这一点：

（）

---

希望这有帮助。

请使用标准版本的css属性，而不要使用供应商前缀-webkit。您不能在jquery选择器中以伪元素为目标。。。请参阅示例，您可以做的最好的事情是添加/删除css类，这样样式将保留在样式表文件中。请使用css属性的标准版本，而不是像-webkit这样的供应商前缀。您不能在jquery选择器中以伪元素为目标。。。例如，您可以做的最好的事情是添加/删除css类，这样样式将保留在样式表文件中。