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

【问题标题】：Adding a CSS gradient to an image--NOT a background image向图像添加 CSS 渐变 - 不是背景图像
【发布时间】：2013-07-30 19:17:31
【问题描述】：

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

http://hungersolutionsny.magadev.net

【问题讨论】：

你试过什么？您能否向我们展示一些代码（不仅仅是指向您网站的链接，我们希望您的问题将来也对其他人有用）？

标签： css gradient

【解决方案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/

【讨论】：

嗨彼得，我觉得这很有趣，但我认为它在我自己的测试中甚至在您提供的链接上都不起作用......？
您可能需要为渐变代码添加前缀。它应该在 chrome 中正常工作。这是其他浏览器（肯定是 IE8 及更高版本）的前缀的小提琴：jsfiddle.net/VrGeM/1
通过从 CSS 渐变生成器中获取代码来实现这一点。谢谢！我确实读过伪选择器应该使用双冒号，以便它在 IE 中工作。我无法在 IE9 中测试，因为我没有副本。你知道这是否适用于 IE9？

【解决方案2】：

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

创建一个透明的 PNG 来使用也很容易，而不是 CSS 渐变，这将具有在旧版本 IE 中工作的优势。

【讨论】：

请注意，如果没有 JavaScript hack，透明 PNG 将无法在 IE 6 中工作。
没错，但我认为在这一点上 IE6 几乎已经死了。不幸的是，IE8 不是。
IE 6 和 7 不是问题。我们不支持他们。谢谢！
IE8 确实支持progid:DXImageTransform.Microsoft.gradient，所以那里不需要PNG...
使用它会导致文本可读性问题吗？通常，这些过滤器会使抗锯齿变得异常。

【解决方案3】：

我通常这样做的方式是通过一个绝对定位的 DIV，它位于图像顶部并包含文本。然后我给它一个像这样的不透明度：

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

如果您想要一个不透明的渐变，这是一个很好的工具，可以让您轻松完成：http://www.colorzilla.com/gradient-editor/

【讨论】：

【解决方案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% 的黑色背景。

【讨论】：

【解决方案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

【讨论】：