为什么小程序background: linear-gradient在真机上透明度会失效？

Question

真机

模拟器

<view class="card_title">为您推荐</view>


.card_title {
  font-weight: 500;
  font-size: 36rpx;
  color: #333333;
  transform-style: preserve-3d;
  padding-left: 20rpx;
}

.card_title::after {
  content: "";
  height: 9px;
  width: 124rpx;
  background: linear-gradient(180deg, #91C4FF 0%, #FFFFFF 100%);
  border-radius: 80px;
  position: absolute;
  bottom: -2px;
  left: 20rpx;
  transform: translateZ(-1px);
  padding-left: 20rpx;
}

Answer 1

改造成 ::before 伪类再试试看？
其实也不需要设置 translate3D 把你伪类的 z-index 值改成 -1 应该也可以。