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

Question

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

我使用以下代码可以正常工作

<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>

然而是我将鼠标悬停在蓝色部分上时的结果。有没有办法让图片横跨页面的整个 section/whole 宽度？我已经尝试将 cover 添加到代码中，但这似乎不起作用，如果我尝试通过代码更改图像的大小，它会破坏一切。

Answer 1

cover 应该适用于您的情况。当您使用 background shorthand 属性时，您需要有一个 / 分隔位置和大小值：

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

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

Javascript style.background not allowing me to adjust size of image

javascript

styles

cover

image