如何使用 Angular 2 添加背景图像伪元素“后”内容？

Question

我正在尝试将 URL 图像从 Angular 中的 html 传递给我的 CSS，但我不能这样做：

我的 CSS 是：

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

我的 html 是：

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

如何实现这一点，以将 offer.photo_url 传递给 CSS 中：

背景：url(myUrl) 不重复中心中心/封面；

非常感谢你

Answer 1

您可以在content 属性中使用url

content: url(imageUrl);

Answer 2

使用ngStyle 和CSS Variables 如下所示：

代替：

CSS：

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: url(myUrl) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }

    }

HTML：

<div class="card-profile_visual" [style.background-image]="'url('+offer.photo_url+')'"></div>

使用这个：

CSS：

card-profile_visual {
      height: $visual-height;
      overflow: hidden;
      position: relative;
      background: linear-gradient(to bottom, darken(#545559, 10%), saturate(darken(#3A4A7B, 2%), 20%), saturate(darken(#3A4A7B, 15%), 20%));
      &:before,
      &:after {
        display: block;
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        z-index: 0;       
        background: var(--my-image) no-repeat center center/cover;
        opacity: 0.5;
        mix-blend-mode: lighten;
      }
    }

HTML：

<div class="card-profile_visual" [ngStyle]="{'--my-image': ' + offer.photo_url + '}"></div>

希望对你有帮助。

Answer 3

试试这个

<div class="card-profile_visual" [style.backgroundImage]="'url('+offer.photo_url+')'"></div>

要在css中的伪元素中添加背景图片，你可以这样做

.card-profile_visual:after{
  background: url(myUrl) no-repeat center center/cover;
}