是否可以在 angular2 中使用 [style]
或 [ngStyle]
更改伪元素的样式?
为了在 div 上获得模糊效果,就像覆盖一样,我应该在伪元素上设置背景图像。
我试过类似的东西
<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">
没用。这个我也试过
<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">
最佳答案
您可以使用 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 + ')'))
:
关于css - 更改angular2中伪元素的样式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35280118/