无法做出适当的渐变淡化效果

Question

我正在尝试在我的图片中制作渐变叠加，这会产生这种效果：

正如你所看到的，底部的渐变会更暗，但顶部的WONT会受到黑暗的影响。

我试过这个：

@include linear-gradient(to top, rgba(0,0,0,0.4) 0%, rgba(255,255,255,1));

但这会在顶部产生白色效果。我希望渐变只使图像的底部变暗，并且不要对图像的上半部分做任何事情。

有谁知道怎么做？

由于

Answer 1

您可以使用以下CSS http://jsfiddle.net/3sxd82nf/5/

    <div id="test">x</div>
    <div id="gradient"></div>



    #test {
        position:absolute;
        top: 10px;
        left: 0px;
        width: 200px;
        height: 200px;
        background-image: url('http://images2.layoutsparks.com/1/198321/50s-diner-chick-squares.jpg');

    }
#gradient {
     position:absolute;
    top: 10px;
    left: 0px;
    width: 200px;
    height: 200px;   

background: -moz-linear-gradient(top,  rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(50%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */



}