背景图像缩放到屏幕大小而不是内容

Background image scale to screen size not to the content

本文关键字：图像 缩放 屏幕 背景      更新时间：2023-09-26

我使用以下JS设置每个页面的背景图像

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

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

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

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

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

如果我是你，我会直接在身体上创建一个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 */
}

将此 CSS 用于正文标记 

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

您可以使用视口百分比长度设置相对于视口大小的大小。

相关文章：