Question

我希望将图像固定为背景，同时在其上滚动半透明框。然而，当我尝试在4：3比例屏幕上执行此操作时，图像只会减少一半。

这是我的CSS：

.content {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

以下是我想要做的一个例子：

http://s.codepen.io/shardros/debug/vOVWwp

非常感谢任何帮助。

Answer 1

在body标记上设置背景而不是.content，这样就可以了。

body {
    background-color: black;
    background-image:url('http://xurbia.tk/alpha/pictures/Croped%20Xurbiar%20Logo%20Mr.%20Isolation.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;        
}

<强> Updated Example

Answer 2

这听起来更像是background-size的问题，而不是保持不变。

尝试使用background-size: contain代替cover。

差异在于： https://developer.mozilla.org/en-US/docs/Web/CSS/background-size

如何保持图像背景图像？

2 个答案: