Question

我正在尝试简单地替换HTML标记的背景并让它填满屏幕。

这是我的代码，用于在页面加载时填充屏幕：

html { 
  background: url(1000x800.jpg) no-repeat center center fixed; 
   -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

我在JQuery中有一些代码，它会侦听要滚动的页面，然后尝试替换这样的图像：

$(window).scroll(function() {
        // when the scroll reaches the bottom
       if($(document).scrollTop() >= new_height) {
          new_height = $(document).scrollTop() + 10; 
          // change the background
          $('html').css({background: "url(1000x800_2.jpg) no-repeat center center fixed"}); 
       }

     }); // end of window scroll

图像确实被替换，它居中并固定。但是，它没有填满屏幕。它保持在1000x800。（我的屏幕尺寸为1900x1000）。

似乎“background-size：cover”属性在此过程中丢失了。所以我尝试恢复它，并使用此代码收到javascript错误：

$('html').css({background-size: "cover"});

有谁知道如何正常工作？

感谢。

Answer 1

background是一个快捷方式属性。如果您未提供所有参数，则任何未提供的参数都将重置为其默认值。由于您只是更改背景图片，请使用background-image：

$('html').css({ 'background-image': 'url(1000x800_2.jpg)' });

如何正确替换HTML背景图像？

1 个答案: