Question

我在标题和背景图片方面遇到了问题。我在顶部有一个标题，下面是HTML。

<section class="blackbannerTop">
    <section class="sponsorlogos">
        <img id="sponsorlogo1" src="logo.png" alt="Sponsor logo">
    </section>
</section>

然后我有一个背景图片的部分应该放在标题下面：

<section id="carBanner">
    <section id="siteLinks">
        <ul class="linklist">
            <li class="linklines"><a id="link1">Link 1</a></li>
            <li class="linklines"><a id="link2">Link 2</a></li>
        </ul>
    </section>
</section>

这里是两个元素的CSS：

.blackbannerTop {
height: 80px;
width: 100%;
background-color: black;
position: fixed;
z-index: 2;}

#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;}

我尝试了填充顶部和边缘顶部。边距顶部移动标题以及背景图像，但填充顶部仅移动背景图像顶部的渐变。所以我的问题是如何让背景图像显示在标题下方，现在图像从屏幕顶部开始，因此图像的90像素不显示。

Answer 1

试试这个

#carBanner {
    top: 80px;
    height: 450px;
    position: relative;
    width: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
    background-size: cover;
}

Answer 2

如果您希望标题覆盖背景的前90px，从屏幕顶部开始，则需要将定位更改为绝对值并添加最高值。

#carBanner {
    position: absolute;
    top: 0;

    .
    . as before
    . 
}

Answer 3

#carBanner {
height: 450px;
position: relative;
width: 100%;
background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(229, 229, 229, 1) 100%), url('TS12-COVER.jpg');
background-size: cover;
clear:both;
top:90px;
}

Backgroundimage始终位于固定标题下，而不是下方

3 个答案: