Question

我正在尝试在标题中显示带有以下 CSS 代码的背景图像。

body {
        background-image: url("./image.jpg");
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-size: 100% 100%;
       }

它在桌面上运行良好，即使我调整浏览器窗口的大小，但当我尝试在移动设备上访问它时，图像会扭曲并拉伸到屏幕顶部不超过几个像素。

提前致谢！

Answer 1

使用background-size: 100vw 100vh

body {
  width: 100%;
  height: 100%;
  background-image: url("https://www.highreshdwallpapers.com/wp-content/uploads/2011/09/Large-Format-HD-Wallpaper.jpg");
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: 100vw 100vh;
}

<body>
</body>

CSS 背景图像在移动设备上失真

1 个答案: