uni-app 在Android上显示iconfont矢量图标时 color属性带Alpha通道值不起作用 例如 color = "#9F00A2EE"

uni-app 在Android上显示iconfont矢量图标时 color属性带Alpha通道值不起作用 例如 color = “#9F00A2EE”

开发环境 版本号 项目创建方式
Windows win10 HBuilderX

示例代码：

<view class="skcard" :style="{background: background}">
    <u-icon custom-prefix="sk-icon" size="300" :name="devicon" :color="icolor"></u-icon>
</view>

操作步骤：

<view class="skcard" :style="{background: background}">
    <u-icon custom-prefix="sk-icon" size="300" :name="devicon" :color="icolor"></u-icon>
</view>

预期结果：

预期结果 RGBA 明暗度起作用。

实际结果：

预期结果 RGBA 明暗度不起作用。

bug描述：

uniapp 在Android 上， 显示iconfont 矢量图标 icon 时 color 属性如果带Alpha 通道值，不起作用， 例如 : color = “#9F00A2EE”

只给 RGB 值可以， RGBA 则无效.

同样的代码在 PC上 H5， iOS 上都OK.


更多关于uni-app 在Android上显示iconfont矢量图标时 color属性带Alpha通道值不起作用 例如 color = "#9F00A2EE"的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 在Android上显示iconfont矢量图标时 color属性带Alpha通道值不起作用 例如 color = "#9F00A2EE"的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的Android平台兼容性问题。在Android系统上，部分WebView对CSS颜色值的RGBA格式支持不完整，导致Alpha通道无法正确解析。

建议的解决方案：

  1. 使用opacity属性替代Alpha通道
<u-icon 
  custom-prefix="sk-icon" 
  size="300" 
  :name="devicon" 
  color="#00A2EE"
  :style="{opacity: 0.62}"
></u-icon>
  1. 使用CSS类名控制透明度
.icon-transparent {
  opacity: 0.62;
}
  1. 对于uView UI的u-icon组件，可以尝试使用color属性和opacity属性组合的方式：
<u-icon 
  color="#00A2EE"
  :opacity="0.62"
></u-icon>
回到顶部