Как правильно задать градиент?

Question

[timesanty]

10 строка в css
задать так, чтобы изображения в итемах - также отображались
https://jsfiddle.net/b2mja7Lr/2/

Comments

[Ankhena]

Приоритет больше у стилей, вставленных через атрибут. Т.е. background из атрибута style перетирает background из css.

Значит, стили нужно либо объединить либо картинку слайда задавать как-нибудь по-другому.
Например, как img.

Правда, в вашем случае всё равно фонового градиента не будет видно, если сверху лежит непрозрачная картинка.
Может, уточните какого эффекта нужно достичь?

[timesanty]

Ankhena, есть row
в нем item

пытаюсь достичь, чтобы можно было задавать градиент и картинку в одном css свойстве

[Ankhena]

timesanty, можно задавать картинку как переменную в html и потом вызывать в стилях как var(--variable).

Но я бы начала с разбора, чем является картинка из слайда.
Это контент (смысловое изображение) или украшение слайда и если оно потеряется, то на смысл это не повлияет.
Если картинку вставляет пользователь через админку, то тоже можно упростить задачу и ставить её как img.
И тогда градиент задавать псевдоэлементу обертки картинки (<picture>)

[timesanty]

Ankhena, так если делать картинку через img
то вроде как будет проблема с текстом. Текст ведь накладывается на картинку

[Ankhena]

timesanty, и какая в этом проблема?
Прибить абсолютом или картинку или текст

Answer 1

[Дмитрий Беляев]

background-image в инлайн стилях перекрывает background в классе, можно так:

Comments

[timesanty]

Дмитрий Беляев , спасибо огромное. этот вариант вполне применяется на продакшене, да? не считается костылем?

или нужно поменять мне принцип

[Дмитрий Беляев]

timesanty, если поддержка устраивает, то вполне: https://caniuse.com/css-variables