Question

我想在使用渐变的同时将图片放在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)'"
>

但仍然无法正常工作。

有帮助吗？

Answer 1

使用纯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中似乎没有内容。

Answer 2

如果要在模板中使用它，可以使用[ngStyle]指令。

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

这里是一个快速的example

Answer 3

消毒并可以工作：

.ts文件中的

：

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

在导出类中添加：

bgImage:any;

在构造函数中添加：

private sanitizer: DomSanitizer

然后创建图像网址并进行清理：

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>

希望有帮助！

Answer 4

使用@Nikhil Chandu回答，但使用管道。

制作类管道：

import { Pipe, PipeTransform } from "@angular/core";
import { DomSanitizer, SafeHtml, 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);
    }
}

使用 sanitizeStyle

<div [style.background-image]="'linear-gradient()' | sanitizeStyle">

Answer 5

您可以这样做：

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

.css文件：

.image {
  background: linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%);
  background: -webkit-linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%);
  background: -moz-linear-gradient(-225deg, rgba(0,0,0,0.6) 50%, rgba(0,36,61,0.6) 80%);
}

角样式背景图片url +线性渐变

5 个答案: