<分区>
我打算使用一张图片作为我的网页背景:
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 够吗？或者，我应该使用其他尺寸吗？或者，也许我应该根据用户的设备定义不同的图像尺寸？如果是这样，我该怎么做？
最佳答案
您应该使用媒体查询为不同的设备加载不同尺寸的图像。例如，无需在手机上加载 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
关于html - 如何为 HTML 背景选择正确的图像大小？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28075313/