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

Question

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

Answer 1

根据您正在寻找的最终结果，您可以考虑以下一些方法和工具。

• 由于桌面和移动屏幕的宽高比不同，有时很难拥有适合所有人的单一背景图像。但是，如果您准备了一个 1920 像素宽 x 1080 像素高的桌面背景图像，以及一个 640 像素宽 x 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;
}