使用javascript向图像添加渐变答案

【问题标题】：Adding a gradient to an image with javascript使用javascript向图像添加渐变
【发布时间】：2020-06-10 17:58:56
【问题描述】：

我正在尝试通过 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%); 

}

【问题讨论】：

请使用标准版本的css属性，而不是像-webkit这样的供应商前缀。
您不能在 jquery 选择器中定位伪元素...参见例如 Selecting and manipulating CSS pseudo-elements such as ::before and ::after using jQuery
您可以做的最好的事情是添加/删除 css 类，因此样式将保留在样式表文件中。

标签： javascript html css

【解决方案1】：

我相信做你正在尝试的最好方法是创建一个 html 画布。使用 pimvdb 的答案已经很好地完成了这项工作：

(Image gradient on HTML5 canvas)

希望这会有所帮助。

【讨论】：