Невозможно сделать правильный градиент выцветанию эффект

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 */ 



}