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

2023年10月31日 208次阅读

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

这意味着,例如,如果用户调整浏览器窗口大小(不像.stretch值,则要清除),将不会调整图像大小.

最佳答案 这将为您提供仅具有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;
}
点赞