Эффект фонового цвета оттенка, примененный к фоновому изображению

Question

Я попытался применить наложение цвета с прозрачностью к фоновому изображению, фоновое изображение отображается и, надеюсь, код подходит для этого, но если у кого-то более эффективный способ сделав это, пожалуйста, поделитесь.

Когда я пытаюсь применить цвет фона со значениями RGBA и прозрачности, ничего не показывает ...

Любые предложения?

.call-to-action { 
color: #fff; 
background: url(images/cta-bg.jpg) no-repeat center center fixed; 
background-color: rgba(255, 255, 255, 0.5) !important; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
font-size: 18px; 
padding: 48px 12px; 
text-align: center; 
} 

http://i.stack.imgur.com/8iNun.png

Answer 1

использовать не изменяя градиент в качестве второго фонового изображения

JSfiddle Demo

CSS

div { 
    width 200px; 
    height:200px; 
    margin: 25px; 
    border:1px solid grey; 
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.5) 0%, rgba(255, 0, 0, 0.5) 100%), url(http://lorempixel.com/output/city-q-c-200-200-1.jpg); 
} 

Answer 2

U также необходимо смешать его:

background-blend-mode: multiply;