css - 具有最大宽度的全屏背景图像

Question

我正在使用描述的第一种技术 here创建一个随浏览器按比例缩放的“全屏”背景图像。

我的图像容器 CSS 是:

.fs-img {
    position: fixed;
    top: 4.5em;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('image.jpg') no-repeat center center fixed; 
    background-size: cover;
}

但是我想在我的网站上设置 max-width 为 1200 像素。当然，将其应用于 body 元素不会对图像产生任何影响，因为它是 position:fixed。

那么有没有一种替代方法可以让全屏图像具有最大宽度，同时仍然保持固定在底部？

这是demo我正在测试的网站。

Answer 1

我认为您可以使用以下样式实现您想要的:

.fs-img {
    position: fixed;
    top: 4.5em;
    right: 50%;
    bottom: 0;
    left: 50%;
    margin:0 -600px;
    background: url(image.jpg) no-repeat center center; 
    background-size: cover;
}

Example