图像后面的CSS属性不同'；它被JavaScript改变了

这是当前的背景：

html {
  background: url('source.gif') no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 100%;
}

然后我用这个来更改它（当鼠标悬停在按钮上时）：

但问题是它甚至不是全屏的

我希望它具有与前一个相同的属性（我的意思是在CSS中）

---

我怎样才能做到这一点呢？

在css中，您可以使用样式来

，但在javascript中，您可以更改主体样式

body { 
    background: url('source.gif') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

document.getElementById('b1').addEventListener('mouseover', () => {
    document.body.style.backgroundImage =  "url('src2.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

另外，如果您想在鼠标不在

b1

元素上方后返回到第一个值，您应该添加如下内容：

document.getElementById('b1').addEventListener('mouseleave', () => {
    document.body.style.backgroundImage =  "url('source.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

而且也行

document.body.style.backgroundSize = "cover";

---

是多余的，因为此属性在css中已设置。

在css中，您可以使用样式

，但在javascript中，您可以更改主体样式

body { 
    background: url('source.gif') no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
}

document.getElementById('b1').addEventListener('mouseover', () => {
    document.body.style.backgroundImage =  "url('src2.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

另外，如果您想在鼠标不在

b1

元素上方后返回到第一个值，您应该添加如下内容：

document.getElementById('b1').addEventListener('mouseleave', () => {
    document.body.style.backgroundImage =  "url('source.gif')";
    document.body.style.backgroundRepeat = "no-repeat";
    document.body.style.backgroundSize = "cover";
});

而且也行

document.body.style.backgroundSize = "cover";

---

是多余的，因为此属性在css中已设置。

更改css，使其应用于body元素，而不是html

document.getElementById（'b1'）.addEventListener（'mouseover'，（）=>{
document.body.style.backgroundImage=“url（'https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg')";
});
body，html{
身高：100%；
填充：0；
保证金：0；
}
html{
背景：url（'https://cdn.pixabay.com/photo/2016/05/27/18/31/chaffinch-1420407_960_720.jpg'）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
Other Image
更改css，使其应用于body元素，而不是html


document.getElementById（'b1'）.addEventListener（'mouseover'，（）=>{
document.body.style.backgroundImage=“url（'https://cdn.pixabay.com/photo/2017/07/24/19/57/tiger-2535888_960_720.jpg')";
});
body，html{
身高：100%；
填充：0；
保证金：0；
}
html{
背景：url（'https://cdn.pixabay.com/photo/2016/05/27/18/31/chaffinch-1420407_960_720.jpg'）没有固定的重复中心；
-webkit背景尺寸：封面；
-moz背景尺寸：封面；
-o-背景尺寸：封面；
背景尺寸：封面；
}
Other Image
您应该更改相同的元素，当初始css设置应用于
html
时，您可以更改
body
样式

这是小提琴：

JS:

CSS:

您应该更改相同的元素，当初始css设置应用于
html
时，您可以更改
body
样式

这是小提琴：

JS:

CSS:

和
不是一回事。提供一个能复制你的问题的答案，好吧，这就是问题所在。我修好了。谢谢@你能把其中一个答案标为正确吗？
和
不是一回事。提供一个能复制你的问题的答案，好吧，这就是问题所在。我修好了。谢谢@你能把其中一个答案标为正确吗？