html - 如何使用 CSS 在图像中添加线性渐变？

Question

我有这段代码。我想使用 Css 为我的图像添加线性渐变。但是到目前为止我已经尝试过这段代码，但是线性渐变没有添加任何东西。我是否必须使用 position:absolute 或 relative 来覆盖图像中的线性渐变？请帮忙。

我用这个

请将此图片添加到图片标签，因为 jsfiddle 没有添加本地文件和上传它的选项。带来不便敬请谅解。

.container { width: 1000px;padding: 0;margin: 0 auto;}
.slideshow {position: relative; background: linear-gradient(to left, rgba(0,0,0,0), rgba(0,0,0,0.1), rgba(0,0,0,0.8));}
.slideshow img {border: 3px solid #153f27;border-radius: 5px;-webkit-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);-moz-box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);box-shadow: 4px 3px 5px 0px rgba(168,168,168,1);}
.slogan {position: absolute; top: 30px; padding: 25px 20px;}
.slogan h1 {font: bold 30px Arial;color: #fff;}
.slogan p {width: 490px;font: bold 17px Arial;color: #fff;padding: 4px 0px;}

<div id="banner">
  <div class="container">
    <div class="slideshow">
      <img src="/image/KOi78.jpg" alt="Lorem Ipsum">
      <div class="slogan">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

一种方法是使用伪元素，如 ::after。

首先，我在 slideshow 元素上为渐变添加了一个伪元素，并使用 position: absolute (和 position: relative在 slideshow 上)，然后通过在伪和 slogan 上设置不同的 z-index，将其分层在图像和文本之间。

.container {
  width: 1000px;
  padding: 0;
  margin: 0 auto;
}

.slideshow {
  position: relative;
}

.slideshow::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to left, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.8));
  z-index: 1;
}

.slideshow img {
  border: 3px solid #153f27;
  border-radius: 5px;
  -webkit-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  -moz-box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
  box-shadow: 4px 3px 5px 0px rgba(168, 168, 168, 1);
}

.slogan {
  position: absolute;
  top: 30px;
  padding: 25px 20px;
  z-index: 2;
}

.slogan h1 {
  font: bold 30px Arial;
  color: #fff;
}

.slogan p {
  width: 490px;
  font: bold 17px Arial;
  color: #fff;
  padding: 4px 0px;
}

<div id="banner">
  <div class="container">
    <div class="slideshow">
      <img src="/image/KOi78.jpg" alt="Lorem Ipsum">
      <div class="slogan">
        <h1>Lorem Ipsum</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
          irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      </div>
    </div>
  </div>
</div>