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

Question

So we have this string representing a color pattern in CSS:

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

It is possible that we may have more rgba(....) or even rgb(...) substrings.

Is there an efficient regexp or method to increase the opacity value of each rgba() substrings that have the opacity specified by 10% for example?

function changeOpacity(text, change = 1) {

    ...

    return(newTextValue);
}

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

So the resulting value would be:

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

Answer 1

Try this:

 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

I don't know your exact requirement but you can easily change the opacity of rgba(....) or rgb(....) in a gradient.

linear-gradient(to top, rgba(255, 0, 0, 0.3), purple 40%, rgba(100, 100, 200) 50%, rgba(255, 0, 0, 0.8))