Angular Material 波纹出现在对象内容或文本的顶部

Question

我创建了一个示例 div，其中包含文本，如

<div class="mydiv"  matRipple matRippleColor="rgba(255,255,0,.5)">
  Click Me!
</div>

它按预期工作，除了黄色出现在 "Click Me" 文本上，这看起来不对。我在这里遗漏了什么吗？

见https://stackblitz.com/edit/angular-ripple

Answer 1

当您检查元素时（我有此 example 中的代码），您会注意到颜色 div 是在文本之后创建的。所以不，你不能正确地实现你想要的。

<div _ngcontent-c21="" class="example-ripple-container mat-elevation-z4 mat-ripple mat-ripple-unbounded" matripple="">
   Click me
   <div class="mat-ripple-element" style="left: -107.606px; top: -161.106px; height: 511.211px; width: 511.211px; background-color: rgba(255, 255, 0, 0.5); transition-duration: 400ms; transform: scale(1); opacity: 0;"></div>
</div>

但是有一个技巧可以做到这一点:

.mat-ripple-element{
  z-index:-1 !important;
}
.mat-ripple{
  z-index:50; // 50 for example
}

Angular Material 波纹出现在对象内容或文本的顶部

Angular Material Ripple appears on top of object content or text

angular

material-design

angular-material2