向图像添加CSS渐变 - 不是背景图像

Question

这是一个使用旋转木马的页面（我相信flexslider）。此转盘中的图像不是背景图像。我需要为图像添加渐变，从下往上，从暗到零的不透明度，这样我就可以使文本更清晰。这可能吗？

http://hungersolutionsny.magadev.net

Answer 1

使用与滑块尺寸相同的绝对定位<div>覆盖图像。给出<div>渐变。确保它在图像上方但在图像顶部的文本下方。

使用透明的PNG而不是CSS渐变也很容易，这样可以在IE的旧版本中使用。

Answer 2

我通常采用的方式是通过绝对定位的DIV，它位于图像的顶部并包含文本。然后我给出一个不透明的东西：

background-color: rgba(0, 0, 0, 0.56);

如果你想要一个具有不透明度的渐变，这是一个很容易实现的好工具：http://www.colorzilla.com/gradient-editor/

Answer 3

就个人而言，我并不是仅仅为造型添加标记的忠实粉丝。我会选择伪元素:before或:after

代码看起来像这样：

HTML

<div class='slideshow-wrapper'>
    <img src='http://www.placekitten.com/800/300'/>
    <h2 class='title'>Some title</h2>
</div>

CSS

.slideshow-wrapper {
    position:relative;
    float: left;
}
.title {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
    z-index: 2;
}
.slideshow-wrapper:before {
    content: '';
    position:absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%);
    z-index: 1;
}

例如：http://jsfiddle.net/VrGeM/

Answer 4

有很多方法可以解决这个问题。主要针对background CSS属性。如果您希望定位与图像重叠的文本，您可以使用以下简单的内容：

body.front #region-content #flexslider-1 ul.slides .views-field-field-banner-statement {
     background-color:rgba(0, 0, 0, 0.5);
}

它不应用渐变，但它确实提供了50％不透明度的黑色背景。

Answer 5

我通常不会以这种方式使用渐变...在过去遇到这个问题时，我总是在包裹图像的div上使用插入框阴影。像这样......

<div class="img-wrap">
  <img src="" />
</div>

然后在CSS中将box-shadow应用于伪选择器......

.img-wrap {
  display: block;
  position: relative;
}

.img-wrap:before {
  display: block;
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-box-shadow: inset 0 -100px 80px 0px rgba(0,0,0,0.4);
}

img {
  display: block;
  width: 100%;
  height: auto;
}

如果您希望直播，请查看此CodePen ... http://cdpn.io/qGwLe