Javascript style.background不允许我调整图像大小

我希望当用户将鼠标悬停在蓝色部分上时，红色部分的背景图像发生变化。

我已经让它与下面的代码一起工作

<script>
    document.getElementById('scrolling-background-column-left').onmouseover = function()        
     {        
      document.getElementById('scrolling-background-section').style.background = "url('https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820,c_limit/Sunset-Beach-Oahu-cr-getty.jpg') no-repeat center";
     };

     document.getElementById('scrolling-background-column-left').onmouseout = function()        
     {        
      document.getElementById('scrolling-background-section').style.background = "";
     };
</script>

document.getElementById（'scrolling-background-column-left'）。onmouseover=function（）
{        
document.getElementById（'scrolling-background-section'）。style.background=“url（'https://media.cntraveler.com/photos/5698051378d099fc122487e3/master/w_820，c_limit/Sunset Beach Oahu cr getty.jpg）“无重复中心”；
};
document.getElementById（'scrolling-background-column-left'）。onmouseout=function（）
{        
document.getElementById（'scrolling-background-section'）.style.background=“”；
};

---

然而，当我将鼠标悬停在蓝色部分时，结果就是这样。有没有一种方法可以使图像跨越页面的整个部分/整个宽度？我曾尝试向代码中添加

cover

，但这似乎不起作用，如果我尝试通过代码更改图像的大小，它会破坏一切。

cover

在您的情况下应该会起作用。使用

background

速记属性时，需要使用

/

分隔位置值和大小值：

document.getElementById('scrolling-background-section').style.background = "url('media.cntraveler.com/photos/5698051378d099fc122487e3/master/…) no-repeat center / cover"; 

---

cover

应该可以使用。当你尝试在背景中添加

cover

时，你的代码是什么？一个问题：你是否已经用纯html和css实现了目标图片？如果是这样，您可以使用javascript进行其他更改。@reporter据我所知，使用html/css无法做到这一点，我需要更改一个部分的背景，同时将鼠标悬停在另一个部分上。@jaye document.getElementById（'scrolling-background-section'）。style.background=“url（'）no repeat cover center”@Johnnymccolory：最终的外观必须是html和css，因为Javascript只是在dom树中更改节点值。