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

2024-05-14 • 问答

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

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

由于桌面和移动屏幕的纵横比不同，有时很难有一张适合所有人的背景图片。但是，如果您准备一张宽 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);
    }
}

cover 或 contains 的背景图像大小也非常有用。指定 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;
}

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

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

大家都在问