Angular 风格背景图片 url + 线性渐变答案

【问题标题】：Angular style background image url + linear gradientAngular 风格背景图片 url + 线性渐变
【发布时间】：2019-01-13 13:44:51
【问题描述】：

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

但还是不行。

有什么帮助吗？

【问题讨论】：

试试[ngStyle]="{'background-image': '...'}"

标签： css angular

【解决方案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 中似乎没有内容。

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

使用@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);
    }
}

使用 sanitizeStyle

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

【讨论】：

【解决方案4】：

消毒，它应该工作：

在您的 .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>

希望有帮助！

【讨论】：

【解决方案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%);
}

【讨论】：

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