Почему не работает градиент сверху картинки?

Question

[syncher]

Код:

background-image: url('../img/OFA8570.jpg'), -webkit-gradient(linear, left top, left bottom, from(red), to(yellow));

В чем проблема? Код из Стековерфлоу, 1000 лайков))

Answer 1

[Moskus]

Работает, например, вот так:
https://jsfiddle.net/tdd8jfuh/1/
Читайте про формат описания градиентов здесь: www.w3schools.com/css/css3_gradients.asp

А вообще, это довольно грязный код.

Comments

[syncher]

Мне нужно чтобы градиент был сверху прозрачный как фильтр. Как это сделать без before???

[Moskus]

syncher: Так бы сразу и сказали, а то что такое "сверху" - непонятно. Тогда уж "поверх".

Тот код, что у вас в вопросе, и очередность фонов имеет не ту, и ни слова о прозрачности там нет.
Вот такое - работает https://jsfiddle.net/tdd8jfuh/5/
Значения прозрачности - это последняя цифра в скобках, rgba(255,2,0,0.3) - тут это "0.3". Полная прозрачность - 0, полная непрозрачность - 1.

[syncher]

Moskus: Спасибо, понял.

[syncher]

Moskus: хотя, не совсем понятно откуда вы взяли параметр to bottom. ПРо него вообще нигде не говорят и не пишут. Где найти ВСЕ возможные значения???

[Вадим Полухин]

syncher: https://developer.mozilla.org/en-US/docs/Web/CSS/l...

[Moskus]

syncher: Еще в своем ответе я привел ссылку на документацию на сайте W3schools, туда вы, очевидно, даже не заглянули, а пишете, что "нет вообще нигде". С таким подходом вы далеко не уедете.

Answer 2

[Сергей Горячев]

Вообще не понятно, что вы хотите от этого кода.
Написано background-image, дальше дописан зачем-то градиент, который, естественно, будет игнорироваться.
Цвет фона в принципе ложится всегда ПОД картинку, так как пишется всегда в конце свойства background.
Если их поменять местами, будет нормально, но не кроссбраузерно, некоторые могут переставить в соотвествии с валидацией CSS.
В данном случае только через псевдоэлементы будет самый кроссовый вариант.
А это для общего развития www.colorzilla.com/gradient-editor

Comments

[syncher]

Что не понятного? Мне надо картинка, и сверху прозрачный фильтр градиент.

[Moskus]

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