0

ヘッダーと背景画像に問題があります。上部に次の 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;}

パディングトップとマージントップの両方を試しました。Margin top はヘッダーと背景画像を移動しますが、padding top は背景画像の上のグラデーションのみを移動します。だから私の質問は、背景画像をヘッダーの下に表示する方法です。画像は画面の上部から始まるため、画像の90ピクセルは表示されません。

4

3 に答える 3

0

画面の上部から始まる背景の最初の 90 ピクセルをヘッダーでカバーする場合は、位置を絶対に変更し、上部の値を追加する必要があります。

#carBanner {
    position: absolute;
    top: 0;

    .
    . as before
    . 
}
于 2013-11-13T10:55:32.900 に答える