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

首页 > 解决方案 > 如何合并超过浏览器高度的响应式背景图像？

问题描述

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

标签： htmlcssimageresponsive-designresponsive

解决方案

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

由于桌面和移动屏幕的宽高比不同，有时很难拥有适合所有人的单一背景图像。但是，如果您准备了一个 1920px 宽 x 1080px 高的桌面背景图像，以及一个 640px 宽 x 960px 高的移动背景图像，您可以使用媒体查询为不同的视口指定不同的背景。
更多信息：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);
    }
}

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

并且指定封面意味着它将填充它应用到的元素的背景，并且您应该期望对背景图像进行一些裁剪。您还可以定位图像。
更多信息：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;
}

推荐阅读