Question

我使用以下JS

设置每个页面的背景图像

 var image = 'url(' + imageUrl + ') top left no-repeat fixed';
        $('body').css({ 'background': image });

通过设置"background-size:cover!important;"能够根据页面内容的高度和宽度来缩放图像。宽度。

我的要求是根据屏幕大小而不是根据页面内容大小来缩放背景图像。

基本上我在移动视图中遇到问题。

Answer 1

您正在为身体设置背景。正文页面内容大小。

如果我是你，我会直接在身体上创建一个div。

<强> HTML

<body>
  <div class="page-bg"></div>

  <!-- YOUR PAGE CONTENT -->
</body>

<强> CSS

.page-bg {
  max-height: 100vh;
  min-height: 100vh;
  width: 100%;
  /* your background styles */
}

Answer 2

将此CSS用于正文标记

body {
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  background-attachment: fixed;
}

Answer 3

您可以使用Viewport-percentage lengths设置相对于视口大小的大小。