4

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

http://hungersolutionsny.magadev.net

4

5 回答 5

9

就我个人而言，我不是只为样式添加标记的忠实粉丝。我会选择一个伪元素: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/

于 2013-07-30T19:32:55.223 回答
1

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

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

于 2013-07-30T19:23:16.577 回答
1

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

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

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

于 2013-07-30T19:23:36.987 回答
0

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

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

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

在此处输入图像描述

于 2013-07-30T19:28:59.160 回答
0

我通常不以这种方式使用渐变......过去遇到这个问题时，我总是在围绕图像的 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

于 2013-07-30T19:48:15.947 回答