Question

我有一个简单的HTML，但我不确定我想做什么（我想做的方式）是可能的..

<div class="container">
  <img src="..." />
</div>

.container有某种渐变背景，在这种情况下是文本的常见黑底

background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));

这是在http://jsfiddle.net/9WQL6/

中模拟的

我希望黑暗的底部位于图片的前方，而不是在它的后面。

我不能使用background-image作为图像，因为css是预编译的。

这可能吗？

Answer 1

另一种方法是使用伪元素（IE8 +）

<强> JSfiddle Demo

<强> CSS

.container{
    max-width: 200px;
    border: 1px solid black;
    position: relative;
}

.container img{
    max-width: 200px;
}

.container:after {
    position: absolute;
    content:" ";
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: -webkit-gradient(top, from(rgba(255, 255, 255, 0)), color-stop(0.65, rgba(255, 255, 255, 0.7)), color-stop(1, rgba(47, 39, 39, 0.5)));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
    background: linear-gradient(top, rgba(255, 255, 255, 0) 65%, rgba(47, 39, 39, 0.7));
}

Answer 2

将图片设为否定z-index：

.container > img {
    position: relative;
    z-index: -1;
}

Answer 3

您可以通过在容器中添加不同的div并在该div上应用渐变来实现此目的。图像将显示在.container中。你将containerdiv放在相对位置上，并将gradientdiv放在absolute上，并使其与containerdiv的宽度和高度相同。

在我的例子中，我给了graddiv类gradient

<div class="container">
    <div class="gradient">
    </div>
    <img src="http://upload.wikimedia.org/wikipedia/commons/thumb/8/85/Smiley.svg/800px-Smiley.svg.png" />
</div>

示例：http://jsfiddle.net/9WQL6/9/

将图像放在背景后面

3 个答案: