[css-backgrounds] Add background-opacity as an alternative to Relative Color (Color Module Level 5) #8465
Description
Currently, it's impossible to change to opacity of a CSS Custom Propriety without:
a) Wacky hacks with Custom Proprieties
b) Relative Colors from CSS Color Module Level 5 which is unsupported by all browser and pretty complex.
c) Pseudo-elements nesting
Let's say I have this variable on my site.
But somewhere else I need to use this color variable but with opacity:
:root {
--c-primary: #e2273c;
}
.regular-background {
background: var(--c-primary);
}Option A
I could use an intermediate CSS Cutom Propriety, but it's hacky and it would require me to wrap my var in a rgb function for every use:
:root {
--c-primary: 226, 39, 60;
}
.regular-background {
background: rgb(var(--c-primary))
}
.regular-background-with-opacity {
background: rgba(var(--c-primary), 0.5);
}Option B
Using relative color from CSS Color Module Level 5
:root {
--c-primary: #e2273c;
}
.regular-background-with-opacity {
background: rgb(from var(--c-primary) r g b / 50%);
}Option C
:root {
--c-primary: #e2273c;
}
.regular-background-with-opacity {
position: relative;
&::before {
content: '';
position: absolute;
inset: 0;
background: var(--c-primary);
opacity: 0.5
}
}Proposal
:root {
--c-primary: #e2273c;
}
.regular-background {
background: var(--c-primary);
background-opacity: 0.5;
}On the plus side, this could also affect background-image which currently require to use Option C and a pseudo-element to change their opacity.
From my very little understanding of how browser engine work, this seem a lot easier to implement than Relative Color and could be implement and shipped much faster.