2

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

基本上我追求典型的背景：覆盖行为（随浏览器大小缩放）但是，希望固定背景以创建视差效果。

如果可以，这是否可能，如何？

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

正文 HTML：

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

如您所见，当您调整它的大小时，背景会稍微调整大小。但是，如果我添加

background-attached:fixed;

背景不再调整大小，只表现得像固定背景一样。

4

1 回答 1

0

尝试这个：

保持

background-attached:fixed;

而不是背景尺寸：封面，请尝试：

background-size: contain;

也供将来参考，尝试将您的代码添加到：http: //jsfiddle.net

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

于 2013-10-05T21:42:57.667 回答