Полупрозрачный градиент поверх картинки

#css

Доброго
Представьте:
 1. на весь фон - картинка;
 2. на весь фон - градиент
А можно ли это смешать? Допустим, что бы была фоновая картинка, а поверх нее слабый
полупрозрачный градиент, скажем сверху (255,255,255.0,6), а с низу (255,255,255.0,4).
Так можно сделать? Сам пробовал и писать этот градиент, и гуглить.. вообщем самоделкин
из меня никакой. Может кто посоветовать решение? (Ну если такое возможно)    

Ответы

Ответ 1

Вот такой вариант есть: пример
Точно работает в IE 10+ и последних версиях Firefox/Opera/Chrome






#mask {
    background: url(demo.png) no-repeat 0 0 transparent;
    height: 37px;
    overflow: hidden;
    position: relative;
    width: 95px;
}

#mask::after {
    background: transparent;
    background: -moz-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0,
0.1) 100%);
    background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,
0, 0, 0.8)), color-stop(100%, rgba(0, 0, 0, 0.1)));
    background: -webkit-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0,
0, 0.1) 100%);
    background: -o-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1)
100%);
    background: -ms-linear-gradient(top, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.1)
100%);
    background: linear-gradient(to bottom, rgba(255, 0, 0, 0.8) 0%, rgba(0, 0, 0,
0.1) 100%);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}


Ответ 2

Делается такое с помощью обычного градиента:



.img {
  display: block;
  width: 200px;
  height: 200px;
  background-image: linear-gradient(to bottom, black 0%, transparent 100%), url(http://i.imgur.com/Tpn26TW.jpg);
  background-size: cover;
  background-position: center;
}





Статья: http://htmlbook.ru/css3-na-primerakh/lineinyi-gradient