Question

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

此JSFiddle是该页面的最小示例。

问题是：当angularjs应用不透明度值时，应该褪色的图像的Z-Index似乎会发生变化。
如果删除ng样式标记，则会看到图像实际位于固定导航栏后面但是使用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添加到导航栏可以解决问题..

Angularjs ng-style改变图像的z-index

1 个答案: