html/css - 顶部菜单阴影不在主图上

Question

正如我在 css 中评论的那样，我对不在 .hero-image 上的 .header-menu 的影子有疑问。我将 .header-menu 的 z-index 设置为 1001，将 .hero-image 的 z-index 设置为 1000，但没有结果。我可以将 .hero-image 的 z-index 设置为 -1 来修复它，但问题是搜索部分不可选择。

如何在图片上添加菜单的阴影？

.hero-image {
            background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://dummyimage.com/600x400/ff00ff/fff.png');
            height: 540px;
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            position: relative;
        }
        .hero-text {
            text-align: center;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: #fff;
        }
        .header-top {
            background-color: #494787;
        }
        .header-menu {
            height: 82px;
            background-color: #fff;
            box-shadow: 0px 20px 20px 0px #00000070; // I have problem here
        }

<div class="header-menu">
        <div class="container">
            <div class="row">
                <div class="col-lg-12">
                    <div class="header-menu">
                        <div class="logo">
                            <a href="#">
                                <img src="#" />
                            </a>
                        </div>
                        <nav class="main-nav">
                            <ul class="main-sections">
                                <li>
                                    <a href="#">Link To</a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="hero-image">
        <div class="hero-text">
            <div class="header-search">
                <form class="header-search-box">
                    <div class="input-group">
                        <select class="form-control select2">
                            <option></option>
                        </select>
                        <div class="input-group-prepend">
                            <button class="btn btn-primary fa fa-search" type="submit">Go</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

更新

它是什么：

我想要的：

当然为了看得清楚，我把它改成红色了

Answer 1

这是代码。希望它能帮助你。如果有任何变化，请告诉我。

body {
  position: relative;
}

.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('https://dummyimage.com/600x400/ff00ff/fff.png');
  height: 540px;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 82px;
  width: 100%;

}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
}

.header-top {
  background-color: #494787;
}

.header-menu {
  height: 82px;
  background-color: #fff;
  box-shadow: 0px 20px 20px 0px #00000070; 
  position: absolute;
  width:100%;
  z-index:99;
}

<div class="header-menu">
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <div class="header-menu">
          <div class="logo">
            <a href="#">
              <img src="#" />
            </a>
          </div>
          <nav class="main-nav">
            <ul class="main-sections">
              <li>
                <a href="#">Link To</a>
              </li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="hero-image">
  <div class="hero-text">
    <div class="header-search">
      <form class="header-search-box">
        <div class="input-group">
          <select class="form-control select2">
            <option></option>
          </select>
          <div class="input-group-prepend">
            <button class="btn btn-primary fa fa-search" type="submit">Go</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>

html/css - 顶部菜单阴影不在主图上

html/css - Top menu shadow doesn't lie on hero image

html

css

z-index