Измените все значения непрозрачности цветового узора 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

Я не знаю ваших точных требований, но вы можете легко изменить непрозрачность rgba (....) или rgb (....) в градиенте.

linear-gradient (вверху , rgba (255, 0, 0, 0.3), фиолетовый 40%, rgba (100, 100, 200) 50%, rgba (255, 0, 0, 0,8))

Answer 2

Попробуйте следующее:

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));