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

前端之家收集整理的这篇文章主要介绍了css – 更改angular2中伪元素的样式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
是否可以使用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类.例如,您可以使用NgClass.

猜你在找的CSS相关文章