Question

我有一个img src，我用它作为背景。使用此css :(图像为1920x1080）

.bg {
    position: absolute;
    z-index: -1;
    width: 100%;
    min-width: 1920px;
}

这就是我想要的桌面，相应地升级更高的res，当我缩小窗口时，它只做我想要的一些。宽度仍然保持（这是好的），但我希望它不能滚动到两侧，我希望图像在新的分辨率上获得。

所以这是我现在调整大小时的外观图像，其中红色区域是当前分辨率，蓝色区域仍然可滚动。

http://i.imgur.com/7VJfKPW.jpg

这是我想要它的样子的图像，黑色区域只是空的，用户无法滚动到两侧，只有在那里有内容时它们才能向下滚动，并且只滚动到那边是否有内容（图像本身除外），当然图像也是以新分辨率为中心。

http://i.imgur.com/O3sLE31.png

任何人都知道如何才能做到这一点？感谢＆＃39;

编辑：更详细的模型

所以这是桌面分辨率：http://i.imgur.com/Z8x4e3I.jpg
这是移动设备分辨率，您可以看到您可以一直滚动到右侧图像大小的末尾：http://i.imgur.com/Y3bC2DI.png
这就是我想要它的方式，图像已经居中，并且你无法滚动到任何一侧，当窗口大于1920x1080时，所有这些都必须使图像的大小增大：http://i.imgur.com/7d2vpRK.png

编辑：tl;博士我希望背景图片始终符合浏览器窗口的大小，即使用户有4k显示器，1080p或手机，但是当我们必须缩小图像时，页面无法滚动到两侧。图像通常是1080p。

Answer 1

更新了jsfiddle：http://jsfiddle.net/Uz5AY/4/。

* {
    margin: 0;
    padding: 0;
}

body {
    background-image: url(http://placehold.it/1900x1080);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

#container > .content {
    width: 70%;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.7);
}

#container > .content > p + p {
    margin-top: 20px;
}

Answer 2

background-size元素负责

只需使用

background-size: cover;

隐藏当前视图之外的图像内容而不会压缩图像

2 个答案: