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

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

Ответ

Вот такой вариант есть: пример Точно работает в 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%; }