按特定比例更改 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(....) 的不透明度。

linear-gradient(上, rgba(255, 0, 0, 0.3), 紫色 40%, rgba(100, 100, 200) 50%, rgba(255, 0, 0, 0.8) )

按特定比例更改 CSS 颜色图案的所有不透明度值

Change all opacity values of a CSS color pattern by a certain ratio

javascript

css

regex

rgba