在 html 上的图像上应用不透明度过滤器答案

【问题标题】：Applying an opacity filter over an image on html在 html 上的图像上应用不透明度过滤器
【发布时间】：2018-08-06 12:18:41
【问题描述】：

我试图找到这个解决方案，但我只能找到在图像上应用过滤器作为 css 上的背景图像的解决方案。

我的 HTML 中有一行大小相同的 3 张图片。我试图复制的效果是对所有具有渐变不透明度的照片进行“过滤”。这个过滤器的底部是完全黑暗的，并且开始变得透明，直到到达顶部。（有点像这样：http://www.webdesignerwall.com/wp-content/uploads/2010/04/css-gradient-box.gif 白顶是透明的）

考虑到图像是 100% 响应的，并且每次我们更改浏览器的大小时都会发生变化，我该怎么做。

PS：渐变代码不是问题，我可以这样做，我找不到解决方案的问题是如何在每个始终遵循图像大小的图像上应用“DIV”或其他东西，不不管它的高度和宽度。

这是我的 HTML：

<section class="home-page-gallery">
        <div class="container-fluid">
          <div class="row">

          <!-- FIRST IMAGE -->
            <div class="col-xs-12 col-sm-4 no-padding yellow-bg">
                <div class="gallery-item">
                  <img src="images/photo01.png" alt="">
                </div>
            </div>

          <!-- SECOND IMAGE -->
            <div class="col-xs-12 col-sm-4 no-padding blue-bg">
              <div class="gallery-item">
                  <img src="images/photo02.png" alt="">
                </div>
            </div>

          <!-- THIRD IMAGE -->
            <div class="col-xs-12 col-sm-4 no-padding pink-bg">
              <div class="gallery-item">
                  <img src="images/photo03.png" alt="">
                </div>
            </div>

          </div><!-- ./ row -->
        </div><!-- ./ container-fluid -->
      </section>

和 CSS：

.gallery-item{
  width:100%;
}

.gallery-item img{
  width:100%;
  height:auto;
}

我已经尝试用另一个 div 包裹每个图像，给出一个 position: relative 和一个 z-index 试图让这个 div 停留在图像上，但它没有工作

非常感谢！

【问题讨论】：

标签： html css image filter opacity

【解决方案1】：

像这样使用伪元素：

.gallery-item {
  width: 100%;
  position:relative;
}
.gallery-item:after {
 content:"";
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 background:linear-gradient(to top,red 20%,transparent 80%);
}
.gallery-item img {
  display:block;
  width: 100%;
  height: auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<section class="home-page-gallery">
  <div class="container-fluid">
    <div class="row">

      <!-- FIRST IMAGE -->
      <div class="col-xs-12 col-sm-4 no-padding yellow-bg">
        <div class="gallery-item">
          <img src="https://lorempixel.com/400/200/" alt="">
        </div>
      </div>

      <!-- SECOND IMAGE -->
      <div class="col-xs-12 col-sm-4 no-padding blue-bg">
        <div class="gallery-item">
          <img src="https://lorempixel.com/400/200/" alt="">
        </div>
      </div>

      <!-- THIRD IMAGE -->
      <div class="col-xs-12 col-sm-4 no-padding pink-bg">
        <div class="gallery-item">
          <img src="https://lorempixel.com/400/200/" alt="">
        </div>
      </div>

    </div>
    <!-- ./ row -->
  </div>
  <!-- ./ container-fluid -->
</section>

【讨论】：

哇，您的建议非常有效，非常感谢我的朋友。你知道我可以使用什么属性来使黑暗和透明之间的分离更接近底部吗？
@jorge 只需调整颜色的 % 值；）我编辑了我的答案，这样您就可以看到值应该去哪里
@Jorge 我还建议在这里阅读更多信息：developer.mozilla.org/fr/docs/Web/CSS/linear-gradient 因为您可以使用 rgba 颜色、添加多种颜色等

【解决方案2】：

您需要一个与图像同级的元素，在 gallery-item 包装器内。

你想用你的 css 做这样的事情：

.gallery-item{
  width:100%;
  position: relative;
}

.gallery-item img{
  width:100%;
  height:auto;
  position: relative;
}

.overlay {
  height: 100%;
  width: 100%;
  position: absolute;
  opacity: 0.5;
  z-index: 1;
  background: linear-gradient(red, yellow);
}

将外部容器定位为relative，然后将渐变el定位为绝对值。这是一个小提琴：https://jsfiddle.net/y9o1paex/11/

【讨论】：