Question

我试图找到这个解决方案，但我只能在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包裹在每个图像中，给出一个位置：relative和一个z-index试图让这个div保持在图像上，但它不起作用

非常感谢你！

在html上的图像上应用不透明度滤镜

0 个答案: