小编典典

更改angular2中伪元素的样式

css

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

为了使div上的模糊效果像叠加层一样,我应该在伪元素上设置背景图像。

我尝试了类似的东西

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

它没有用。我也试过了

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

阅读 492

收藏
2020-05-16

共1个答案

小编典典

不,这不可能。实际上,这不是一个Angular问题:伪元素不是DOM树的一部分,因此不会暴露任何可用于与其交互的DOM API。

如果要以编程方式处理伪元素,通常的方法是间接的:添加/删除/更改类,并在CSS中使该类影响相应的伪元素。因此,在您的情况下,您可以再增加一个更改必要样式的类:

.blur:before {/* some styles */}
.blur.background:before {/* set background */}

现在,您需要做的就是.background在需要before伪元素获取背景时在元素上切换类。NgClass例如,您可以使用。

2020-05-16