按一定比例更改 CSS 颜色模式的所有不透明度值

Question

所以我们有这个字符串代表 CSS 中的颜色模式：

const COLOR = 'linear-gradient(to top, rgba(255, 0, 0, 0.3), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.8))';

我们可能有更多的 rgba(....) 甚至 rgb(...) 子字符串。

是否有一种有效的正则表达式或方法来增加每个rgba()子字符串的不透明度值，例如，不透明度指定为 10%？

function changeOpacity(text, change = 1) {

    ...

    return(newTextValue);
}

console.log(changeOpacity(COLOR, 1.1));

所以结果值将是：

linear-gradient(to top, rgba(255, 0, 0, 0.33), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.88))

Answer 1

尝试这个：

 const COLOR = 'linear-gradient(to top, rgba(255, 0, 0, 0.3), purple, rgba(100, 100, 200), rgba(255, 0, 0, 0.8))'; function changeOpacity(text, change = 1) { newstr = text.replace(/\d\.\d/g, x => (parseFloat(x) * change).toFixed(2)); return(newstr); } console.log(changeOpacity(COLOR, 1.1));

Answer 2

我不知道您的确切要求，但您可以轻松更改渐变中 rgba(....) 或 rgb(....) 的不透明度。

线性渐变（到顶部，rgba(255, 0, 0, 0.3)，紫色 40%，rgba(100, 100, 200) 50%，rgba(255, 0, 0, 0.8)）