Как сделать чтобы backgound color и image отображались вместе?

Question

[Анастасия]

.first_block {
    background: transparent linear-gradient(180deg, #FFFFFF 0%, #F8F7FD 100%) 0% 0% no-repeat padding-box;
    background-image: url(../img/first_bg.svg);
    background-size: cover;
    opacity: 1;
    position: relative;
}

Как сделать чтобы был и backgound color и backgound image?
Потому что в моем случае отображается только backgound image

Comments

[Сергей delphinpro]

В вашем случае background-color никак не может отображаться — он прозрачный (transparent).
А linear-gradient — это тоже картинка, background-image.
Вы нижним правилом ее переопределяете.

Если нужно накладывать стопкой несколько изображений (градиенты входят в их число, как я уже сказал) — используйте синтаксис множественных фонов (multiple backgrounds)

Answer 1

[Максим]

Они отлично уживаются ..только писать надо по другому background: rgba(.......), url(....) и будет это работать

Comments

[Анастасия]

background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(248, 247, 253, 1)), url(../img/first_bg.svg);

Так?

[Максим]

Анастасия, да...только будут ли просматриваться два градиента друг через друга?

[Анастасия]

Максим Ленский, Если я сдаю отдельно градиент - отображается, если задаю отдельно svg отображается. Если вместе- нет, даже тем способом который вы мне подсказали.
Хотя если давать не градиент, а какой-то обычный цвет, то все прекрасно работает

[Максим]

Анастасия, вы можете всё это собрать в одном svg и вывалить в url уже всего один файл

[Анастасия]

Максим Ленский,

background-image: url(../img/first_bg.svg);
    background-image: url(../img/first_bg.svg), linear-gradient(#FFFFFF, #F8F7FD);

вот так работает, хотя градиент не полностью правильный)
спасибо)

[Максим]

Анастасия, нарисуйте градиент в svg собеоите все svg в один файл и его подключите

[Froggyweb]

Анастасия, у тебя градиент непрозрачный и он закрывает картинку :)

[Анастасия]

Froggyweb, Максим Ленский,

background-image: url(../img/first_bg.svg);
background-image: url(../img/first_bg.svg), linear-gradient(180deg, #FFFFFF, #F8F7FD);
background-size: cover;
opacity: 1;
position: relative;

эти стили работают во всех браузерах кроме google chrome, то есть во всех браузерах отображается и картинка и градиент, а в хроме только градиент

[Максим]

Анастасия, я же говорю - соберите градиент и svg в один файл - и этот файл подключайте

[Froggyweb]

https://codepen.io/froggyweb/pen/vYOWWwj
все работает Chrome поддерживает почти все