如何在 JQuery 中设置"正文"背景

Question

当点击按钮时，我试图更改'body'元素的背景，但没有发生任何事情，Chrome浏览器控制台中也没有返回任何错误。我试过多种方法。对于方法1，我还尝试用背景图像替换后台。在CSS代码中，已经分配了一个背景图像。

JS代码：

$('.btn').click(function(){
    //method1:
    $('body').css({backgroundImage: 'url:(https://working-url)'});
    //method2:
    $('body').css('background', 'url:(https://working-url)');
}

引用"body"的CSS代码：

html,
body {
 margin: 0;
 padding: 0;
}
body {
 color: #F0F8FF ;
 background: url("back.jpg") no-repeat center center fixed;
 background-size: cover;
 font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

Answer 1

在分配背景时必须小心。CSS是简写的，这意味着在一行中分配所有背景属性。如果稍后指定另一个背景，它将覆盖所有这些属性。这意味着，由于您只是在添加图像，no-repeat center center fixed不会转移到新的背景。您需要分别设置这些属性，并且只更改background-image。

至于你想要瞄准的jQuery，如下所示：

$('body').css('background-image', 'url(https://working-url)');

或

$('body').css({'background-image': 'url(https://working-url)'});

Answer 2

试试这个：

HTML按钮部分：

<button>Change background</button>

查询部分：

$('button').click(function(){
   $('body').css('background-image','image.jpg');
});