背景封面固定



我正在尝试创建一个响应,固定的背景,适用于所有主要的浏览器。

基本上我是在典型的背景:覆盖行为(与浏览器大小的比例),但是,希望背景是固定的,以创建视差效果。

这是可能的吗?

CSS到目前为止没有固定:

#front_header {
background: url(1.png) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#front_header .featured {
width: 100%;
max-width: 950px;
min-width: 755px;
margin: 0 auto;
overflow: hidden;
}
#front_header .txt {
margin: 19.5% 0 19.5%;
text-align:center;
display: block;
}

Body HTML:

<section id="front_header">
<div class="featured">
<div class="txt">
<h2>Test</h2>
</div>
</div>
</section>

正如你所看到的,当你调整它的大小时,背景会稍微调整。但是如果我加上

background-attached:fixed;

背景不再调整大小,只是表现得像一个固定背景。

试试这个:

background-attached:fixed;

,而不是background-size: cover,试试:

background-size: contain;

也为将来的参考,尝试添加您的代码:http://jsfiddle.net

最好是模拟问题,让每个人都能看到和帮助。

最新更新