RGB和RGBA之间的转换（实用、赞）

最新推荐文章于 2024-08-29 10:12:47 发布

转载最新推荐文章于 2024-08-29 10:12:47 发布 · 3.9k 阅读

4 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/hai2653068/article/details/91883082

实用同时被 3 个专栏收录

738 篇文章

订阅专栏

JavaScript

311 篇文章

订阅专栏

205 篇文章

订阅专栏

本文介绍了如何在前端开发中实现RGB与RGBA颜色格式之间的相互转换。提供了rgbToRgba和rgbaToRgb两个实用函数，用于将RGB颜色转换为带有透明度的RGBA格式，以及从RGBA格式中提取RGB颜色值。此外，还详细解释了如何从RGBA颜色字符串中获取透明度值。

原文出处：https://blog.youkuaiyun.com/hai2653068/article/details/91883082

/**
     * rgb转rgba
     * @param color
     * @param alp
     * @returns {string}
     */
    function rgbToRgba(color,alp){
        var r,g,b;
        var rgbaAttr = color.match(/[\d.]+/g);

        if(rgbaAttr.length >=3){
            var r,g,b;
            r = rgbaAttr[0];
            g = rgbaAttr[1];
            b = rgbaAttr[2];
            return 'rgba('+r+','+g+','+b+','+alp+')';
        }
    }

    /**
     * rgba转rgb
     * @param color
     * @returns {string}
     */

    function rgbaToRgb(color){debugger;
        var rgbaAttr = color.match(/[\d.]+/g);
        if(rgbaAttr.length >=3){
            var r,g,b;
            r = rgbaAttr[0];
            g = rgbaAttr[1];
            b = rgbaAttr[2];
            return 'rgb('+r+','+g+','+b+')';
        }
        return '';
    }

    /**
     * 获取rgba中的透明度
     * @param color
     * @returns {number}
     */
    function getRgbaAlp(color){
        var alp = 1;
        var rgbaReg = /rgba\([\d ]+(?:\,([\d. ]+)){3}\)/;
       if(rgbaReg.test(color)){
           alp = color.replace(rgbaReg,'$1');
        }
        return alp;
    }

RGB和RGBA之间的转换 （实用、赞）

RGB和RGBA之间的转换（实用、赞）