css - 更改angular2中伪元素的样式

Question

是否可以在 angular2 中使用 [style] 或 [ngStyle] 更改伪元素的样式？

为了在 div 上获得模糊效果，就像覆盖一样，我应该在伪元素上设置背景图像。

我试过类似的东西

<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">

没用。这个我也试过

<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">

Answer 1

您可以使用 CSS 变量实现所需的功能。

在你的样式表中你可以这样设置背景图片:

.featured-image:after      { content: '';
                             background-image: var(--featured-image); 
                           }

之后，您可以在 DOM 树中的相同元素或更高层以编程方式设置此变量:

<div class="featured-image" [ngStyle]="{'--featured-image': featuredImage}">

更多关于 CSS 变量的信息:https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables请注意，浏览器支持尚未完成。

另请注意，您需要使用 sanitizer.bypassSecurityTrustResourceUrl(path) 或 sanitizer.bypassSecurityTrustStyle('--featured-image:url(' + path + ')')):