背景封面与固定

时间:2013-06-07 01:27:47

标签: html css background fixed cover

我正在尝试创建一个适用于所有主流浏览器的响应式FIXED背景。

基本上我是在典型的背景之后:覆盖行为(按浏览器大小缩放)但是,想要修复背景以创建视差效果。

如果是这样,这甚至可能吗?

到目前为止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;

背景不再调整大小,只应表现得像固定的背景。

1 个答案:

答案 0 :(得分:0)

试试这个:

保持

background-attached:fixed;

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

background-size: contain;

另外,为了将来参考,请尝试将代码添加到:http://jsfiddle.net

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