前端之家收集整理的这篇文章主要介绍了
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.
原文链接:https://www.f2er.com/css/216293.html