Угловая материальная рябь появляется поверх содержимого объекта или текста - PullRequest
Новая
       9

Угловая материальная рябь появляется поверх содержимого объекта или текста

0 голосов
/ 14 марта 2019

Я создал образец div с текстом в нем, как в 

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

Работает как положено, за исключением того, что над текстом «Click Me» появляется желтый, который выглядит неправильно. Я что-то здесь упускаю?

См. https://stackblitz.com/edit/angular-ripple

1 Ответ

0 голосов
/ 14 марта 2019

Когда вы проверяете элемент (у меня есть код из этого примера ), вы можете заметить, что цвет 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
}
...