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 1200px。当然，将其应用于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

全屏背景图像，最大宽度

1 个答案: