Question

这是我的代码。这是我的HTML。我希望在标题中有一个图像背景，并在标题上滑动部分。

<body>
    <header id=slideover>
       <div> Hello World</div>
    </header>
    <section>
        <div> stuff</div>
        <div> stuff</div>
        <div> stuff</div>
    </section>
</body>

Answer 1

以下是您可以实现这一目标的一种方法：使用position:fixed的固定高度标头和header上<{1}}的高度等于section的高度/ p>

html, body {
  margin: 0;
}

header {
  position: fixed;
  height: 80px;
  background: url(https://images.pexels.com/photos/111091/pexels-photo-111091.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb) no-repeat center;
  color: white;
  width: 100%;
  top: 0;
  line-height: 80px;
  padding: 0 16px;
  box-sizing: border-box;
}
section {
  margin-top: 80px;
  background: #fff;
  position: relative;
  width: 100%;
  padding: 16px;
  box-sizing: border-box;
}

<body>
    <header id=slideover>
       <div> Hello World</div>
    </header>
    <section>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
          <div> stuff</div>
    </section>
</body>

有没有办法让页面正文滑过页面顶部的图像，就像在WordPress网站上一样？

1 个答案: