Question

我打算使用图片作为我的网页背景：

html {
    background:#505D6E url(/img/body7.jpg) no-repeat center center fixed;
    min-height:100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}

图像尺寸应该是多少？ 1920×1280px会不够？或者，我应该使用其他尺寸吗？或者，我可能应该根据用户的设备定义不同的图像大小？如果是的话，我怎么能这样做？

Answer 1

您应该使用媒体查询为不同的设备加载不同大小的图像。例如，不需要在手机上加载1080p图像。这是一个简单的实现：

body{
    background-color:#505D6E;
    background-repeat: no-repeat;
    background-position: center center
    background-attachment: fixed;
    background-image: url(/img/body7-maxres.jpg);
    min-height:100%;
    -webkit-background-size: cover;
       -moz-background-size: cover;
         -o-background-size: cover;
            background-size: cover;
}
@media (max-width: 1920px){
    body{ background-image: url(/img/body7-1080p.jpg); }
}
@media (max-width: 500px){
    body{ background-image: url(/img/body7-sm.jpg); }
}

媒体查询文档：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

Answer 2

图片越大，加载页面所需的时间就越长。

您确实可以使用CSS媒体查询，以便您的用户只加载符合其视口大小的图像。

进一步说明：https://developers.google.com/web/fundamentals/layouts/rwd-fundamentals/use-media-queries?hl=en

媒体查询使我们能够创建响应式体验，其中特定样式应用于小屏幕，大屏幕以及介于两者之间的任何位置。媒体查询语法允许创建可根据设备特征应用的规则。

如何为HTML背景选择正确的图像大小？

2 个答案: