angular - Angular Material Ripple 出现在对象内容或文本的顶部

Question

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

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

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

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

标签： angularmaterial-designangular-material2

Answer 1

当您检查元素时（我有此示例中的代码），您会注意到颜色 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
}