Question

http://www.wearethefirehouse.com/wcftest/

当窗口展开时，标题背景图像在其下方部分的顶部下方“浮动”。如果您带上浏览器窗口，您可以看到图像中大约有一半位于下方“关于”部分的顶部。

如何编辑CSS以“锁定”该背景图像的底部，使其不会滑动？（基本上，BG图像底部的渐变应始终与棕色相对。）

这是CSS：

.intro {
display: table;
width: 100%;
padding: 100px 0;
text-align: center;
color: #0000;
background: url(../img/intro-bg5.jpg) no-repeat top center;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover; }

Answer 1

将css更改为：

将margin-top: 56px;添加到.intro部分

.intro {
display: table;
width: 100%;
padding: 100px 0;
text-align: center;
color: #0000;
background: url(../img/intro-bg5.jpg) no-repeat top center;
background-color: #000;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
margin-top: 56px;
}

并将margin-top: 0;添加到.intro部分的@media (min-width: 767)：

@media (min-width: 767px)
.intro {
height: 100%;
padding: 0;
margin-top: 0px;
}

但正如webeno的回答所述，这并不能解决你的渐变问题。

Answer 2

问题是BG图像仅为标题设置，因此下一部分将始终覆盖它，除非您删除background-size: cover;并将标题的高度设置为图像的高度。

然而，这种方式，图像不会在更大的屏幕上扩展。为了解决这个问题，我建议你从标题中删除BG图像并将其添加到正文中。这样整个BG图像将一直显示，直到它自然地完成渐变（我在图像上看到你“硬编辑”）。

或者，您可以使用linear-gradient在标题部分底部使用css创建渐变效果。

这是使用CSS渐变实现此功能的实现（注意：此处，我将BG图像移动到body元素）：

* {
    padding:0;
    margin:0
}

body {
    background: url("http://lorempixel.com/400/200/") no-repeat;
}

header {
    background-image: -moz-linear-gradient(bottom, rgba(92, 78, 55, 1), rgba(92, 78, 55, 0));
    background-image: -ms-linear-gradient(bottom, rgba(92, 78, 55, 1), rgba(92, 78, 55, 0));
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(92, 78, 55,0)), color-stop(100%, rgba(92, 78, 55,1)));
    background-image: -webkit-linear-gradient(bottom, rgba(92, 78, 55, 1), rgba(92, 78, 55, 0));
    background-image: -o-linear-gradient(bottom, rgba(92, 78, 55, 1), rgba(92, 78, 55, 0));
    background-image: linear-gradient(bottom, rgba(92, 78, 55, 1), rgba(92, 78, 55, 0));
    background-repeat: repeat-y;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(92, 78, 55, 1)', endColorstr='rgba(92, 78, 55, 0)', GradientType=1);
    height:100px;
    width:400px;
}

section {
    background-color:#5C4E3B;
    height:100px;
    width:400px;
}

<body>
    <header></header>
    <section></section>
</body>

制作Bootstrap标题图像＆＃34;锁定＆＃34;在它下面的部分的顶部

2 个答案: