您如何使用网站背景图像支持大屏幕分辨率？
Posted
技术标签:
【中文标题】您如何使用网站背景图像支持大屏幕分辨率？【英文标题】：How do you support large screen resolutions with website background images? 【发布时间】：2017-04-16 13:23:43 【问题描述】：我有一个自己开发的网站，但我刚刚得到了一个人在 2560 x 1600 显示器上查看它的屏幕截图，这看起来有点荒谬。屏幕分辨率支持的合理上限是多少？我担心通过添加巨大的图像对加载时间产生负面影响。我该如何正确处理？
【问题讨论】：
我会创建不同大小的背景图像的多个版本，并使用媒体查询在视口宽度增加时应用它们。该站点显示桌面屏幕尺寸统计信息，以帮助您选择最大宽度gs.statcounter.com/… 您也可以尝试将图像放大 2 倍并将 JPG 压缩设置为 0% 以节省几个字节 filamentgroup.com/lab/compressive-images.html 【参考方案1】：解决方案 1：最大宽度
使用具有以下 CSS 的容器 div：
#innerbody
width: 100%;
max-width: 2000px;
margin: 0 auto;
将所有 HTML 放入此容器中（将容器包裹在所有 HTML 周围），如下所示：
<body>
<div id="innerbody">
... your page ...
</div>
</body>
我还会在正文中添加一个漂亮的微妙背景颜色，以标记“页面”的结束位置，如下所示：
body background: #eee;
#innerbody background: #fff;
解决方案 2：屏蔽质量
如果您只担心（较差的）图像质量，您可以添加容器 div（来自解决方案 1）并使用此 CSS 覆盖阴影（对角线）。这个技巧通常用于低质量的全屏视频，但也适用于背景图像。
#innerbody
width: 100%;
background: url(/hatch.png);
解决方案 3：媒体查询
有大屏幕吗？你会得到一个大图像。有小屏幕吗？你会得到一个小图像。听起来合乎逻辑，对吧？您可以通过使用媒体查询来实现这一点。像这样工作：
@media screen and (max-width: 500px)
body
background: url(small_image.jpg);
@media screen and (max-width: 1000px) and (min-width: 501px)
body
background: url(medium_image.jpg);
@media screen and (max-width: 2000px) and (min-width: 1001px)
body
background: url(big_image.jpg);
@media screen and (min-width: 2001px)
body
background: url(really_big_image.jpg);
对于每种屏幕尺寸，这些媒体查询中的一个将为 true。将提供该图像。
【讨论】：
【参考方案2】：为了解决您的加载时间问题，一种选择是使用媒体查询，以便您可以根据访问者视口大小控制背景图像。例如
@media (max-width: 800px)
.div-with-background
background-image: url("background-sm.jpg");
@media (max-width: 1200px)
.div-with-background
background-image: url("background-md.jpg");
@media (min-width: 1201px)
.div-with-background
background-image: url("background-lg.jpg");
屏幕分辨率支持的合理上限是多少？
这取决于您的访问者。如果您使用 Google Analytics，您可以通过转到用户 > 技术 > 浏览器和操作系统并在“次要维度”下搜索“屏幕分辨率”来获取详细信息
希望这会有所帮助！
【讨论】：
以上是关于您如何使用网站背景图像支持大屏幕分辨率？的主要内容，如果未能解决你的问题，请参考以下文章