Question

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

}

Answer 1

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

（Image gradient on HTML5 canvas）

希望这会有所帮助。

使用javascript

1 个答案: