Угловое 5 градиентное фоновое изображение

Question

Как добавить градиент к изображению при использовании Angular 5?

В настоящее время у меня есть это:

<div class="event-home-img" [style.background-image]="'url(' + event?.eventImage + ')'"></div>

Если добавлено linear-gradient(url( ... , transparent), выдается ошибка, потому что linear-gradient метод не существует.

Мое решение:

<div class="event-home-img" [ngStyle]="{'background-image': 'linear-gradient(transparent 80%,
    #151825), url(' + event?.eventImage + ')'}">
    </div>

Answer 1

[style.background-image]="linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.0)), url('+event?.eventImage+')'"

Answer 2

Вы можете сделать что-то, что называется Layer stack.Просто отделяя ваши background-image значения с ,, они складываются.

Так что это будет выглядеть так:

<div class="event-home-img" [style.background-image]="'linear-gradient(/* your gradient */), url(' + event?.eventImage + ')'"></div>

В этом случае linear-gradient будет на вершине стека, что означает, что он находится перед image.

Answer 3

Вы можете использовать ngStyle

здесь решение

html / template

<div class="myclass" [ngStyle]="setMyStyle()">
  this is background angular backgorund
</div>

В вашем компоненте

setMyStyle() {
    let styles = {
      'background':'#eb01a5',
      'background-image': 'url("https://getsatisfaction.com/corp/img/product/five_obstacles.png"), linear-gradient(red, yellow)',
      'background-repeat':'no-repeat'
    };
    return styles;
}