JavaScript-如何设置背景图像以便在滚动时固定头部分-堆栈溢出

顺晟科技

2022-10-19 11:31:36

我试图使用CSS设置背景图像，但它覆盖了标题栏上的内容。我已经固定了头部的位置。但是当我滚动图像时，它覆盖了标题，任何人都可以告诉如何修复它。我在滚动标题时附上了一张屏幕截图。


    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/styles.css">
        <title></title>
      </head>
      <body>
        <section id="title-bar">
          <h1> Visualizer </h1>
            <a href="url">Login</a>
          <a href="url">Registration</a>
            <a href="url">Home</a>
        </section>
        <section id="intro">
          <div class="bg-image"></div>
          <div class="bg-image"></div>
        </section>
      </body>
    </html>

滚动时，图像出现在标题栏上方，但我试图获得标题栏内的图像。 CSS代码

'''


    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/styles.css">
        <title></title>
      </head>
      <body>
        <section id="title-bar">
          <h1> Visualizer </h1>
            <a href="url">Login</a>
          <a href="url">Registration</a>
            <a href="url">Home</a>
        </section>
        <section id="intro">
          <div class="bg-image"></div>
          <div class="bg-image"></div>
        </section>
      </body>
    </html>


    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="/css/styles.css">
        <title></title>
      </head>
      <body>
        <section id="title-bar">
          <h1> Visualizer </h1>
            <a href="url">Login</a>
          <a href="url">Registration</a>
            <a href="url">Home</a>
        </section>
        <section id="intro">
          <div class="bg-image"></div>
          <div class="bg-image"></div>
        </section>
      </body>
    </html>

顺晟科技：

必须应用高于该节。

根据MDN:

CSS属性设置定位元素及其后代或flex项的z顺序。具有较大Z索引的重叠元素覆盖具有较小Z索引的重叠元素。

在我们的例子中，简单地apply to将使它与节重叠，因为它的默认值为0。

上一篇：HTML-使用绝对位置对视频进行响应下一篇：JavaScript-Form文本区

网站建设

Html

JavaScript-如何设置背景图像以便在滚动时固定头部分-堆栈溢出