Css 角度样式背景图像url+；线性梯度

我想把一张图片放在一个div中，同时使用渐变。经过一些尝试，我的最佳解决方案是：

<div 
  class="form-edit-picture-wrapper"
  [style.background-image]="'linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%), url(/assets/hands.jpeg)'"
>

但仍然不起作用

---

有什么帮助吗？

您可以这样做：

<div class="image">
 <image src="url" alt="">
</div>

---

使用纯css而不是内联样式

.form-edit-picture-wrapper{
    background: linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%),
    url(/assets/hands.jpeg)
}

---

您还需要设置高度和宽度，因为您提供的div中似乎没有内容。

如果您想在模板中使用它，可以使用

[ngStyle]

指令

[ngStyle]="{background: 'linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%), url(/assets/hands.jpeg)'}"

---

这里有一个快速的消毒，它会起作用：

在.ts文件中：

import { DomSanitizer } from '@angular/platform-browser';

在导出类中添加：

bgImage:any;

在构造函数中添加：

private sanitizer: DomSanitizer

然后创建图像url并清理：

this.bgImage = this.sanitizer.bypassSecurityTrustStyle('linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%),url(/assets/hands.jpeg)');

这就是消毒部分

现在在您的html中：

<div [style.background-image]="bgImage">

还有一种不使用ngStyle进行消毒的方法：

<div [ngStyle]="{'background-image': 'linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%),url(/assets/hands.jpeg)'}"></div>

---

希望有帮助

使用@Nikhil Chandu答案，但使用管道

制造类管道：

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeStyle } from '@angular/platform-browser';

@Pipe({
    name: 'sanitizeStyle'
})
export class SanitizeStylePipe implements PipeTransform {

    constructor(private _sanitizer:DomSanitizer) {
    }

    transform(v:string):SafeStyle {
        return this._sanitizer.bypassSecurityTrustStyle(v);
    }
}

使用消毒方式

<div  [style.background-image]="'linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(../assets/image.png)' | sanitizeStyle">

---

try

[ngStyle]=“{'background-image'：'…'}”

这里的要点不是在div中放置一个实际的图像，而是有两个背景图像…这是完全可能的。我想你误解了这个问题

<div  [style.background-image]="'linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .3)), url(../assets/image.png)' | sanitizeStyle">