为什么小程序background: linear-gradient在真机上透明度会失效？-灵析社区
Kapp啊$0920真机  模拟器  为您推荐 .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; }
万码8LB30MLH在微信小程序中使用 "background: linear-gradient" 时可能会遇到透明度失效的问题，这通常是由于以下原因：
1. CSS 限制：微信小程序的渲染层基于 WeX5 引擎，其对 CSS 的支持可能并不完全与 Web 标准一致。某些 CSS 属性或者值在小程序中可能不被支持或者表现不一致。
2. 透明度语法问题：在使用 "linear-gradient" 时，透明度（"rgba" 或 "hsla"）需要正确书写。如果语法错误，透明度可能不会生效。
3. 渲染问题：小程序的渲染层可能会对某些 CSS 属性有特殊的处理方式，导致预期效果与实际效果不符。
针对你提供的代码，以下是几个可能的原因和解决方案：
- 检查透明度语法：确保你在 "linear-gradient" 中使用了正确的透明度语法。例如，应该是 "rgba(91, 203, 255, 0.5)" 而不是 "#91C"。
- 小程序版本：确认你的小程序基础库版本。旧版本的小程序可能不支持某些 CSS 属性。升级到最新版本的小程序基础库可能会有所帮助。
- 使用兼容的 CSS 属性：尝试使用其他方式来实现相似的效果，比如使用图片代替 CSS 渐变。
下面是修正后的代码示例，假设你想在渐变中添加透明度：
css
.card_title::after {
content: "";
height: 9px;
width: 124rpx;
background: linear-gradient(180deg, rgba(91, 203, 255, 0.5), rgba(91, 203, 255, 1));
border-radius: 80px;
position: absolute;
bottom: -2px;
left: 20rpx;
transform: translateZ(-1px);
}
请确保你使用的颜色值和透明度是正确的，并且你的小程序基础库版本支持这些 CSS 属性。如果问题仍然存在，你可以查阅微信官方文档或者在小程序社区寻求帮助。
,
庆广大改造成 "::before" 伪类再试试看？
其实也不需要设置 "translate3D" 把你伪类的 "z-index" 值改成 "-1" 应该也可以。