时间戳

首页 > 解决方案 > 标题覆盖英雄

html - 标题覆盖英雄

问题描述

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

我尝试添加CSS background-attachment:fixed，.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>

标签： htmlcss

解决方案

只需减少opacity标题上的 a 并增加标题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>

推荐阅读