html - 图像标签顶部的 CSS 渐变 (HTML)

Question

我正在尝试实现这种效果:

http://imgur.com/aEKKuM7

灰色是图像的占位符。

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

我的编码版本如下所示:http://imgur.com/QWmdJSa

我不确定如何让它降到梯度以下。我尝试使用 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>

希望对你有帮助