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

Question

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

http://hungersolutionsny.magadev.net

Answer 1

就我个人而言，我不喜欢仅为样式添加标记。我会去寻找一个伪元素: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/