Фоновое изображение с линейным градиентом в Rails

Question

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

это то, что я думаю, что должно работать:

background-image: url('banner_img.jpg'), (rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)) 

но Rails загрузит только изображение, если я использую:

background: image-url('banner_img.jpg') 

добавления линейного градиента к этому не работает.

Любые идеи?

спасибо

Answer 1

Вот мой код для вас.

HTML

<div class='foo'></div> 

CSS

.foo { 
    position: relative; 
    background-image: url('http://adityamehta.in/wp-content/uploads/2014/08/Sky-Blue-Sky.jpg'); 
    width: 400px; 
    height: 200px; 
} 

.foo:before { 
    content: ""; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(to right, red, orange); 
    mix-blend-mode: color; 
} 

Look codepan.