Question

我试图取消这种效果：

灰色是图像的占位符。

我的目标是使用CSS渐变（白色到透明）并将图像显示在渐变下方。占位符图像最终将成为wordpress主题的帖子特色图像。这就是为什么我没有使用背景图片。

我不确定如何让它低于渐变。我尝试使用Z-index，但隐藏了所有内容背后的图像。

以下是我的代码的外观：

HTML：

<article class="inlineContainer newsBox"><!-- Gradient is on newsBox class -->
    <div class="details">
        <div class="image">
            <strong class="tag">Games</strong>
            <img src="images/newsimg.jpg" alt="preview" /> <!-- Image I want Behind Gradient-->
        </div>
        </div>              
        <div class="post borderBox">
            <h3><a href="">We will tell you everything about Aatrox New Champion</a></h3>
            <p>Aliquam erat volutpat. Morbi a augue et velit congue faucibus. Quisque suscipit porta iaculis. Vivamus et elementum orci. Proin euismod ante nisi, vel consectetur massa dapibus id. Donec condimentum... Ut quis nisl at erat ultricies pellentesque at ut justo. </p>
            <div class="bottom">
                <div class="metaDetails">
                    <a class="author borderBox" href="">Doublelift</a>
                    <a class="comments borderBox" href="">1289 Comments</a>
                </div>
                <a class="readMore" href="">Read More</a>
            </div>
        </div>
</article>

CSS：

.newsBox {
    border: 1px solid #bdccd3;
    border-radius: 5px;
    box-shadow: 0px 2px 3px 0px rgba(207, 218, 220, 1);
    background: -moz-linear-gradient(left,  rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(100%,rgba(255,255,255,1)));
    background: -webkit-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -o-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: -ms-linear-gradient(left,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to right,  rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=1 );
}
.image {
    height: 100%;
    width: 160px;
    margin: 0 auto;
    position: relative;
    background-color: grey;
}
.image img {
    height: 261px;
    width: 160px;
    display: block;
}

Answer 1

我不知道你是否已找到解决方案。我遇到了类似的问题，我希望在我的照片中进行从透明到白色的过渡。

我使用的CSS是

    .gradient-effect{
        position: relative;
        display: block;
    }
    .gradient-effect::before{
        content: '';
        position: absolute;
        left: 0;
        bottom: -1px;
        right: 0;
        height: 30%;
        background: linear-gradient(to bottom,rgba(255,255,255,0),#CCC) repeat left top;
    }

HTML就像这样

<div class="gradient-effect">
    <img class="img-responsive" src="images/my-image.jpg" alt="">    
</div>

我希望这会对你有所帮助。

Answer 2

有人在这里留下了答案然后用jsfiddle然后将其删除。不知道为什么，但它让我朝着正确的方向前进。

这就是我的所作所为：

将内容背景更改为渐变的白色。
在图片周围添加了一个新容器。将渐变放在此容器上。
将图片的z-index更改为-1。

这会将渐变放在图像上，然后渐变为内容bg的白色。

完美无缺。感谢任何发布jsfiddle的人！

CSS Gradient On Top图像标记（HTML）

2 个答案: