我有background-attachment:fixed;
的简单背景图片。在.jumbotron
部分,我有内容,如标题,副标题和按钮。我如何才能这样做,以便在滚动时.jumbotron
内容保持不变,以便.jumbotron
之下的内容正在移动它。
我以前见过这种类型的效果,但它并不常见,所以我很难找到一个例子,希望你理解我的描述。
.jumbotron {
background-image: url(http://placekitten.com/1920/1080);
background-size: cover;
background-attachment: fixed;
text-align: center;
padding: 40px 10px;
color: blue;
}

<section class="jumbotron">
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
<p class="description">Lorem ipsum dolor sit amet...</p>
<a href="#" class="button">Button</a>
</section>
&#13;
答案 0 :(得分:4)
您必须通过position:fixed;
并巧妙地使用z-index
来完成此操作。
以下是您试图实现的目标:https://jsfiddle.net/n4ebgmo7/1/
这是固定的CSS:
.jumbotron {
background-image: url(http://placekitten.com/1920/1080);
background-size: cover;
background-attachment: fixed;
text-align: center;
padding: 40px 10px;
color: blue;
position: fixed;
z-index: 1;
width: 100%;
top: 0;
}
.content {
position: relative;
z-index: 2;
background-color: #ffffff;
margin-top: 250px;
width: 100%;
padding: 1em;
}
你在这里做的是将.jumbotron
修复到页面顶部,并告诉它下面的元素,它必须:
.jumbotron
(这是使用z-index
)margin-top
等于.jumbotron
的高度,因此它不会从.jumbotron
<强> 修改 强>
如果.jumbotron
的高度是动态的(如评论中所述),那么您可以添加一些jQuery来动态设置margin-top
部分的.content
。< / p>
这是一个小提示,向您展示如何:https://jsfiddle.net/n4ebgmo7/3/
这是所需的jQuery:
$(document).ready(function(){
$('.content').css({
'margin-top':$('.jumbotron').outerHeight()
});
});
答案 1 :(得分:1)
.jumbotron {
background-attachment: fixed;
background-image: url("http://placekitten.com/1920/1080");
background-repeat: no-repeat;
color: blue;
height: 100%;
left: 0;
padding: 40px 10px;
position: fixed;
text-align: center;
top: 0;
width: 100%;
}
<section class="jumbotron">
<h1 class="title">Title</h1>
<h2 class="subtitle">Subtitle</h2>
<p class="description">Lorem ipsum dolor sit amet...</p>
<a href="#" class="button">Button</a>
</section>