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中的代码）时，您会注意到在文本之后创建了color 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 Ripple出现在对象内容或文本的顶部

1 个答案: