css - 背景图像拉伸

Question

我想拉伸背景图像以匹配屏幕大小

body {
    margin-left: auto !important;
    margin-right: auto !important;
    width: 80%;
    background-image: url(hola.jpg);
}

我试着放background-size: 1500px 1500px;，是固定的。

我怎样才能做到这一点并自动为所有页面分辨率？

score 1 · Accepted Answer

background-size:cover;
background-position:50% 50%;

不兼容 IE8 及更低版本，现在 IE11 已经出来了，你自己决定是否需要支持。

score 0 · Accepted Answer

使用它，如果您<body>没有覆盖整个窗口，它甚至应该可以工作：

background-attachment: fixed;
background-size: 100%;

（来源：https ://developer.mozilla.org/en-US/docs/Web/CSS/background-size ：

<percentage>
将背景图片在对应维度上缩放到指定的背景定位区域百分比的值，该百分比由 background-origin 的值决定。[...]如果背景的附件是固定的，则背景定位区域是浏览器窗口的整个区域，不包括滚动条覆盖的区域（如果存在）。[...]

2 回答 2