根据分辨率自动调整背景图像的大小

Question

这就是问题所在：我想拥有一个CSS代码，该代码可以仅根据所用PC的分辨率自动调整网站背景的大小。

例如，这意味着如果用户调整浏览器窗口的大小（不会像.stretch值那样清晰），则不会调整图像的大小。

Answer 1

这将为您提供仅使用 CSS 的响应式背景：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

这将是一个仅包含 CSS 的响应式图像。如果您想更改每个屏幕尺寸的图像，请将该声明放入媒体查询中。

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
    /* Styles */
}

欲了解更多信息，您可以查看此问答：

Twitter Bootstrap 的响应式背景？

如果您不需要响应式图像，只需从html选择器中删除 CSS3 声明即可：

html { 
    background: url(images/bg.jpg) no-repeat center center fixed;
}