изображение png делает цвет фона черным в css ионном

#html #css #ionic-framework #sass #ionic4

Вопрос:

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

 ion-content {
    --background:  url("/assets/product_background.png") 0 0/100% 95% no-repeat;
--ion-background-color: linear-gradient(to bottom,  #1a1240 35%,#6528af 70%,#736eed 100%);
}
 

With Background image

введите описание изображения здесь

without background image

введите описание изображения здесь

Комментарии:

1. Загляните в инструменты разработки вашего браузера, чтобы определить элемент, чтобы увидеть, что перезаписывает что. Может быть, вы можете соединить оба фона вместе и пропустить настройку ионов.

Ответ №1:

Просто добавьте все ваши свойства к --background значению.

В вашем случае:

--background: url("/assets/product_background.png") 0 0/100% 95% no-repeat, linear-gradient(to bottom, #1a1240 35%, #6528af 70%, #736eed 100%);

Это добавит ваше изображение, а затем включит ваш градиент.