按一定比例更改 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)）