CSS inherit previous background rgba value EXCEPT alpha (opacity)

Question

I want to change only the opacity of existing background color , the color is controlled by server and i can't change it because i use a website builder , but i want to override the background opacity value with style="" .
I've read How do I give text or an image a transparent background using CSS? and also searched through internet and the only answer i found was to use rgba(r,g,b,a) function .

So how do i make it so that the r,g,b inherit from previous value except for the alpha (opacity) ? if not possible , any workaround to achieve the same thing ? And if pure css solution is not possible , any workaround using javascript ?

You can't. `inherit` can't be broken down and neither can color. (`rgb()` and `rgba()` are a kind of macro that generate a color setting. Once they're made, they can't be split.) — Ouroborus, Oct 31 '20 at 04:53
@Ouroborus ouch that's hurt , do you know any workaround ? please ? — i'm ashamed with what i asked, Oct 31 '20 at 05:05
I already said i can't , the server control the color , i use a website builder , changing the color is through the builder . — i'm ashamed with what i asked, Oct 31 '20 at 05:10
Err... Do the colors provided by the tool change without your control? — Ouroborus, Oct 31 '20 at 05:13
@Ouroborus yes the tool allow me to change color by clicking my mouse in the web builder , but not through code , and i want the opacity to be flexible using javascript — i'm ashamed with what i asked, Oct 31 '20 at 05:14
So, yeah, if you already know what the initial color is, you can copy those numbers to the `style` attribute you want to set. — Ouroborus, Oct 31 '20 at 05:16
But that means the color picker in the web builder no longer work since i manually assign the value using style="" ? — i'm ashamed with what i asked, Oct 31 '20 at 05:17
The color picker will still do what it always did. And, yes, using `style` the way you intend is likely to override it if they're operating on the same element. — Ouroborus, Oct 31 '20 at 05:19
yes they "still work" but since i override the color picker rgba data , it means the color picker won't have any actual effect on the final result and i had to change hundreds of style="" everytime i change color @_@ that's why i'm asking this question. — i'm ashamed with what i asked, Oct 31 '20 at 05:21
are you looking for a pure css solution? Does javaScript helps? — Ali Sheikhpour, Oct 31 '20 at 05:22
It sounds like what you actually want to do is change how your tool's color picker works. — Ouroborus, Oct 31 '20 at 05:22
i have no experience on javascript , hmm ..... but my website require user to enable javascript , okay i edit my question to accept javascript — i'm ashamed with what i asked, Oct 31 '20 at 05:22

score 1 · Accepted Answer · answered Oct 31 '20 at 05:32

1

There is a way to achieve this in JavaScript:

First, target your element:

var elem = document.querySelector('#maincontent');
Then, you can capture the current background-color:

var oldColor = getComputedStyle(elem ).backgroundColor;
Then, update the color:

var newColor = 'rgba' + oldColor.slice(3, -1) + ', 0.5)';

// The above line will convert the color from rgb to rgba

// rgb(16, 14, 23) => rgba(16, 14, 23, 0.5)
Now, you can update the bg-color of the target element:

elem.style.backgroundColor = newColor;

answered Oct 31 '20 at 05:32

Shuvo

1,253
9
18

yo this is actually clever working workaround , especially the slice part , but can you please do it without cropping string ? performance issue reason .... (upvoted anyway thanks :D) – i'm ashamed with what i asked Oct 31 '20 at 05:37
Since you need the original `rgb` color code, you actually need to slice the string. There should be a better way to retrieve the color code, but I don't think you can do it without slicing. And, by the way, I think this small string slicing operation won't cause any performance issue – Shuvo Oct 31 '20 at 05:46
Well if it's not possible then okay , just a little more careful to optimization won't hurt . Small slicing isn't performance issue but multiply that by hundreds elements and the effect start to take place . – i'm ashamed with what i asked Oct 31 '20 at 06:02

CSS inherit previous background rgba value EXCEPT alpha (opacity)

1 Answers1