css - 背景图像渐变不适用

Question

我试图通过在其父级 div 上设置它来在图像上应用背景图像渐变，但它没有任何效果，这很奇怪，所以我之前已经这样做过。

<header id="hero">
  <div id="hero-image">
    <a href="#"><img src="http://placeholdit.imgix.net/~text?txtsize=44&txt=Hero%20Image&w=1920&h=500" /></a>
  </div>
</header>

header#hero {
  margin: 0 auto;
  width: 100%;
  font-size: 1rem;
}
header#hero #hero-image {
  background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
  display: block;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
}

演示:http://codepen.io/ourcore/pen/xgqNZJ

Answer 1

我能够通过将 position: relative 和 z-index: -1 应用于 #hero-image img 来实现这一点:

header#hero {
  margin: 0 auto;
  width: 100%;
  font-size: 1rem;
}
header#hero #hero-image {
  background-image: linear-gradient(transparent 50%, black 100%);
}
header#hero #hero-image img {
  display: block;
  position: relative;
  width: 100%;
  max-height: 500px;
  object-fit: cover;
  z-index: -1;
}