如何保持图像背景图像静止?
How to keep an image background image still?
我想将一个图像固定为背景,同时在其上滚动一个半透明框。但是,当我尝试在 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
如有任何帮助,我们将不胜感激。
这听起来更像是你的 background-size
的问题,而不是保持不动。
尝试 background-size: contain
而不是 cover
。
不同点在这里:
https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
在 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;
}
我想将一个图像固定为背景,同时在其上滚动一个半透明框。但是,当我尝试在 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
如有任何帮助,我们将不胜感激。
这听起来更像是你的 background-size
的问题,而不是保持不动。
尝试 background-size: contain
而不是 cover
。
不同点在这里: https://developer.mozilla.org/en-US/docs/Web/CSS/background-size
在 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;
}