javascript - 为什么小程序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 应该也可以。

Answer 2

这个问题可能是由于以下原因导致的：

1. 不同设备的渲染差异：不同的设备可能对 CSS 属性的解释和渲染方式不同。这可能是由于硬件性能、操作系统版本、浏览器版本等差异造成的。
2. CSS 属性的兼容性问题：可能在使用 linear-gradient 的时候，真机上的浏览器不支持该属性或其使用的参数。可以尝试检查浏览器兼容性，并相应地调整 CSS 代码。
3. 样式计算：在某些情况下，浏览器可能会对 CSS 属性进行优化，这可能会导致预期之外的结果。例如，如果背景色是透明的，浏览器可能会忽略 linear-gradient 并直接使用默认的背景色。

针对这个问题，你可以尝试以下解决方案：

1. 检查浏览器的兼容性：使用 Can I use 这个网站来检查你的 CSS 属性和浏览器的兼容性。
2. 使用 vendor prefixes：在 CSS 中，有些浏览器可能需要特定的前缀来解析某些 CSS 属性。例如，-webkit-linear-gradient 可能在一些老版本的 Chrome 或 Safari 中工作。
3. 使用 JavaScript 替代 CSS：如果 CSS 无法满足你的需求，你可以尝试使用 JavaScript 来实现相同的效果。例如，你可以使用 Element.style.backgroundColor 来动态设置背景色。
4. 对真机进行针对性优化：根据真机上的具体表现，你可以尝试调整 CSS 代码以适应真机。例如，如果真机上的某个属性不起作用，你可以尝试替换或修改它。

希望这些建议能帮助你解决问题！