是否可以使用[style]或[ngStyle]在angular2中更改伪元素的样式?
[style]
[ngStyle]
为了使div上的模糊效果像叠加层一样,我应该在伪元素上设置背景图像。
我尝试了类似的东西
<div class="blur" [style.before.backgroundImage]="'url('+ featuredImage[i] + ' )'">
它没有用。我也试过了
<div class="blur" [ngStyle]="'{:before{ background-image:url('+ featuredImage[i] + ' )}}'">
不,这不可能。实际上,这不是一个Angular问题:伪元素不是DOM树的一部分,因此不会暴露任何可用于与其交互的DOM API。
如果要以编程方式处理伪元素,通常的方法是间接的:添加/删除/更改类,并在CSS中使该类影响相应的伪元素。因此,在您的情况下,您可以再增加一个更改必要样式的类:
.blur:before {/* some styles */} .blur.background:before {/* set background */}
现在,您需要做的就是.background在需要before伪元素获取背景时在元素上切换类。NgClass例如,您可以使用。
.background
before
NgClass