android 和 IE 不支持 color 8位值,样式丢失怎么处理?

/ 2021-07-18 / 2474人浏览 / 0人评论

css

偶然发现android和IE不支持color为8位值,如果color设置为位,相关的样式都无法正常显示出来。

color 6位值对应的 RGB;8位值对应的RGBA,A表示透明度。

所以通常 color 8位需要转成 rgba(255, 255, 255, 0);

当然除此之外还可以记通过js转换,下面提供js转换方法:

 function parseRGBA(val) {
    val = val.trim().toLowerCase();  //去掉前后空格
    let color = {};
    try {
        let argb = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(val);
        color.r = parseInt(argb[2], 16);
        color.g = parseInt(argb[3], 16);
        color.b = parseInt(argb[4], 16);
        color.a = parseInt(argb[1], 16) / 255;
    } catch (e) {
        console.log(e)
    }
    return 'rgba(' + color.r + ',' + color.g + ',' + color.b + ',' + color.a.toFixed(0) + ')';
}

//调用方法
parseRGBA('#FFF16C0E');

全部评论