包头覆盖英雄

Question

我在做一个网站。说到CSS，我有点生疏。我正试图获得与此页面https://prp.fm/相同的效果。我希望标题是在一个透明的背景英雄部分。标题不需要是粘性的，但我无法使标题覆盖在头上。

我尝试在background-attachment:fixed CSS中添加.hero-section，但它只是将图像修复到页面上，而不是滚动页面。我做的不是想要的。我想要英雄部分后面的标题和滚动与页面。

​

.main {
  padding-top: 0 !important;
}

.header-section {
  background: #212121;
  padding: 0 33px;
  padding-bottom: 50px;
  border-bottom: 1px solid #fff;
  position: relative:
}

.hero-section {
  height: 962px;
  background-image: url(../img/chart-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding-top: 0px;
  z-index: 100;
}

<header class="header-section" id="header">
  <div class="header-warp">
    <!-- Site Logo -->
    <a href="home.html" class="site-logo">
      <img src="img/logo.png" alt="">
    </a>
    <!-- responsive -->
    <div class="nav-switch">
      <i class="fa fa-bars"></i>
    </div>
  </div>
</header>
<div class="main">
  <section class="hero-section">
  </section>
  <div id="inner">
    <section class="some-section">
      <div class="container">
        <div class="section-title text-center">
          <h2>Tile</h2>
        </div>
        <div class="row about-box">
          <div class="col-lg-6">
            <img src="img/pic1.jpg" alt="">
          </div>
          <div class="col-lg-6">
            <div class="ab-content">
              <h4>A short History</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
                Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

​

Answer 1

只需减少标题上的opacity，并增加标题中内容的font-weight，如下所示

​

.main {
  padding-top: 0 !important;
}

.header-section {
  background: #212121;
  padding: 0 33px;
  padding-bottom: 50px;
  border-bottom: 1px solid #fff;
  opacity: .3; /* added */
  position: relative:
}

.hero-section {
  height: 962px;
  background-image: url(../img/chart-bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: top center;
  padding-top: 0px;
  z-index: 100;
}

<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<header class="header-section" id="header">
  <div class="header-warp">
    <!-- Site Logo -->
    <a href="home.html" class="site-logo">
      <img src="img/logo.png" alt="">
    </a>
    <!-- responsive -->
    <div class="nav-switch">
      <i class="fa fa-bars"></i>
    </div>
  </div>
</header>
<div class="main">
  <section class="hero-section">
  </section>
  <div id="inner">
    <section class="some-section">
      <div class="container">
        <div class="section-title text-center">
          <h2>Tile</h2>
        </div>
        <div class="row about-box">
          <div class="col-lg-6">
            <img src="img/pic1.jpg" alt="">
          </div>
          <div class="col-lg-6">
            <div class="ab-content">
              <h4>A short History</h4>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu tincidunt ligula. Fusce dictum ullamcorper purus, at elementum sem sollicitudin non. Sed id tristique lacus. Fusce pellentesque dignissim arcu, id hendrerit urna feugiat vitae.
                Pellentesque viverra aliquet arcu, vel aliquet est commodo quis. Nam tempus, nisl eu maximus viverra, magna quam porta nibh.</p>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

​