背景

我在开发 webview 环境下的 H5 小应用（Vue 3）时，碰到了一个兼容性上的问题，在 Android 下，WaterWaveChart 组件的两个挡板（baffle）始终渲染不出来，后来经过不断的测试，定位到了我使用的 8 位 16 进制颜色上，随后我使用 rgba() 颜色进行替换，完美修复了这个问题。

下面是我写的 WaterWaveChart 组件：

<template><div class="water-wave-chart" :style="{ ...styleOfMain }"><div class="baffle baffle-first" :style="{ bottom: `${bottomOfBaffle}px`, ...styleOfBaffle }"></div><div class="baffle baffle-second" :style="{ bottom: `${bottomOfBaffle}px`, ...styleOfBaffle }"></div><p class="value">{{percent < 100 ? `${percent}%` : completedPrompt}}</p></div>
</template><script>
import { bigMath as math } from '@/utils/math.js'export default {props: {radius: { type: Number, default: 100 },percent: { type: Number, default: 0 },completedPrompt: { type: String, default: 'Complete' },},name: 'WaterWaveChart',data() {return {};},computed: {styleOfMain() {const { radius } = this.$props;const size = parseInt(math.format(math.evaluate(`2 * ${radius}`)));return {width: `${size}px`,height: `${size}px`,}},styleOfBaffle() {const { radius } = this.$props;const size = parseInt(math.format(math.evaluate(`4 * ${radius}`)));return {width: `${size}px`,height: `${size}px`,left: `-${radius}px`,}},bottomOfBaffle() {const { percent, radius } = this.$props;return parseInt(math.format(math.evaluate(`${percent} * (2 * ${radius} / 100)`)));},},
}
</script><style scoped lang="less">
.water-wave-chart {.relative-no-offset();.flex-column-center-center();overflow: hidden;border-radius: 50%;background-color: #1890FF;.baffle {position: absolute;display: block;z-index: @second-layer;}.keyframes(rotate, {0% {transform: translate(-0%, -0%) rotate(0deg);}25% {transform: translate(-1%, -1%) rotate(90deg);}50% {transform: translate(-0%, -2%) rotate(180deg);}75% {transform: translate(1%, -1%) rotate(270deg);}100% {transform: translate(-0%, -0%) rotate(360deg);}});.baffle-first {border-radius: 45%;// background-color: #ffffff66;background-color: rgba(255, 255, 255, 0.4);animation: rotate 15s linear -0s infinite;-webkit-animation: rotate 15s linear -0s infinite;-moz-animation: rotate 15s linear -0s infinite;}.baffle-second {border-radius: 48%;// background-color: #ffffffED;background-color: rgba(255, 255, 255, 0.929);animation: rotate 30s linear -15s infinite;-webkit-animation: rotate 30s linear -15s infinite;-moz-animation: rotate 30s linear -15s infinite;}.value {display: inline;color: #52C41A;font-size: 2.4rem;font-weight: 500;z-index: @third-layer;}
}
</style>

初步结论

Android 下的 webview 不支持 8 位 16 进制颜色，如果在样式中使用到了，将不会渲染此样式对应的元素。

网页颜色

网页颜色是在万维网上设计网页时，表示各种颜色的方法。颜色可以用三组十六进制数字表示，部分常用颜色或和上下文相关的内容也可以用英语名称的“关键字”来表示。

16 进制数字表示方法

由于网页是基于计算机浏览器开发的媒体，所以颜色以光学颜色 RGB（红、绿、蓝）为主。网页颜色是以 16 进制代码表示，一般以“#”号开头，后面分别为 R、G、B 的 16 位进制数。

在 HTML 和 CSS 中使用 3 字节共 6 个十六进制数字表示一种颜色，每字节从 00 到 FF，相当十进位数字从 0 到 255，按顺序前两位是红色的值，中间两位是绿色的值，最后两位是蓝色的值。

CSS 3 引入了 #RRGGBBAA 和 #RGBA 的表示方式。其中的 AA 与 A 表示颜色的透明度。

十进制“函数”表示

从 CSS 2.1 开始，提供有 rgb(red,green,blue) 的十进制颜色代码。

从 CSS 3 开始，网页颜色支持 RGBA 和 HSLA 颜色表示法：

rgba(255,0,0,0.5) - 半透明的红色。
hsla(120,100%,50%,0.3) - 半透明 (0.3) 的绿色。

支持度与最终结论

Android 5-6.x WebView: Chromium 105 开始支持 #RRGGBBAA 格式的颜色。

踩坑～CSS～8 位16 进制颜色相关推荐

LeetCode 271. 字符串的编码与解码（4位16进制字符+字符串）
文章目录 1. 题目 2. 解题 1. 题目请你设计一个算法,可以将一个字符串列表编码成为一个字符串. 这个编码后的字符串是可以通过网络进行高效传送的,并且可以在接收端被解码回原来的字符串列表 ...
8位16进制频率计设计实验--VHDL
一.实验目的 (1)学习并掌握Quartus II的使用方法 (2)学习简单时序电路的设计和硬件测试. (3)学习使用VHDL 语言方法进行逻辑设计输入 (4)学习设计8位16进制频率计,学习较复杂的 ...
python十进制单精度浮点(float)转16位16进制(FP16 hex)
python十进制单精度浮点(float)转16位16进制(FP16 hex) 目的将神经网络权重存放到FPGA内部需要将可训练参数从float转换到FP16 hex. Code # tt.py i ...
16进制颜色识别和搭配规律
在CSS中,经常会用到16进制的颜色来设置文本.背景.边框等颜色,但是对于一个纯前端来讲,16进制颜色的识别和搭配可能会较为陌生了 ,本文简单介绍一下16进制颜色的一些规律 16进制颜色的数值意义: ...
16进制颜色识别和搭配规律 (实用）
原文出处:https://blog.csdn.net/weixin_39037804/article/details/100266599 在CSS中,经常会用到16进制的颜色来设置文本.背景.边框等颜 ...
rgb与16进制颜色是如何相互转换的？
在css中定义颜色可以使用rgb颜色值,例:rgb(182, 0, 35):也可以使用16进制颜色值,例:#B60023.不管是rgb(182, 0, 35),还是#B60023都表示了同一种颜色,其 ...
16进制颜色透明度计算方法
在安卓软件开发时老是会遇到取一定透明度的颜色,这个其实可以计算的. 安卓系统里颜色一般用6位16进制表示,如#ffffff,全为f,说明是各种颜色的组合,是白色.#000000是什么颜色都没有,那就是 ...
【图片】Python对RGB颜色与16进制颜色进行互转
RGB颜色被称为"真彩色",是Photoshop中默认使用的颜色,也是最常用的一种颜色模式.RGB模式的图像由3个颜色通道组成,分别为红色通道(Red).绿色通道(Green)和蓝 ...
android 16进制颜色代码
在开发过程中,会看到有些设置的颜色为8位,有些是6位,开始时有些搞不明白,后面查看一些资料才发现原理是这样的.以#ff000000为例, #ff000000此为16进制颜色代码,前两位ff为透明度,后 ...

踩坑～CSS～8 位16 进制颜色