我正在使用描述的第一种技术 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我正在测试的网站。
最佳答案
我认为您可以使用以下样式实现您想要的:
.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;
}
关于css - 具有最大宽度的全屏背景图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19687484/