javascript - Angularjs ng-style 更改图像的 z-index

Question

当用户在我的页面上滚动时，我试图淡出图像。

这JSFiddle是页面的最小示例。

问题是:当 angularjs 应用不透明度值时，应该淡化的图像的 Z-Index 似乎发生了变化。
如果删除 ng-style 标签，您会看到图像实际上位于固定导航栏的后面。
但是使用 ng-style 标签，图像位于导航栏的顶部。

所以代替

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" 
        ng-class="{'header-img-text' : true}" ng-style="{opacity : headerTextOpacity}">

使用

<img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" 
        ng-class="{'header-img-text' : true}">

在分层时给出正确的行为。但是不透明度不会消失(很明显)。

有没有办法避免这种情况？如何做到这一点？

Answer 1

将 z-index 添加到导航栏可以解决问题..