Question

这就是问题：我希望有一个CSS代码，允许我根据所用电脑的分辨率自动调整我网站的背景。

这意味着，例如，如果用户调整浏览器窗口大小，则不会调整图像大小（不像.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 */
}

有关详细信息，您可以查看此问答：

Responsive backgrounds with Twitter Bootstrap?

如果您不想要自适应图像，只需从html选择器中删除CSS3声明：

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

Answer 2

这可能会有所帮助......

背景尺寸：含有;背景来源：内容盒;

这将帮助您将图像保持为正常屏幕尺寸的原始尺寸，并根据更改的div尺寸调整大小。但我们必须保持高度为自动。否则它的高度会影响背景图像的大小。

基于分辨率调整自动背景图像大小

2 个答案: