如何合并超过浏览器高度的响应式背景图片？

Question

我的背景图片超出了浏览器的高度。我如何合并图像，以便我可以向下滚动以查看剩余部分，同时保持不同浏览器大小的比例？我编写或使用的代码只会裁剪图像以适应浏览器的大小。溢出似乎没有影响。

Answer 1

根据您要寻找的最终结果，这里有一些您可以考虑的方法和工具。

• 由于桌面和移动屏幕的纵横比不同，有时很难有一个适合所有人的背景图片。但是如果你准备了一张宽 1080 像素的桌面背景图片，以及一张宽 640 像素高 960 像素的移动背景图片，你可以使用媒体查询为不同的视口指定不同的背景。
  更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Backgrounds_and_Borders/Resizing_background_images

@media(max-width:480px){ 
    body{
       background-image:URL(mobile-background.jpg);
    }
 }

@media(min-width:481px){ 
    body{
       background-image:URL(desktop-background.jpg);
    }
}

• 封面或包含的背景图像大小也非常有用。指定 contain 意味着背景图像将被缩放以适应它应用到的元素的大小。

并且指定 cover 意味着它将填充它应用到的元素的背景，您应该期望对背景图像进行一些裁剪。您还可以定位图像。
更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

div{  
   background-size: contain;  
   /* or */
   background-size: cover;
   background-position: center;
}

• 有时您可能希望停止背景滚动：
  更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/background-attachment

div{
   background-attachment: fixed;
}