Csswg-drafts: Suggestion: “background-opacity” CSS property (as suggested by CSS-Tricks.com).

[HT-7]

From CSS-Tricks.com: https://css-tricks.com/snippets/css/transparent-background-images/

There is no CSS property background-opacity, but you can fake it by inserting a pseudo element with regular opacity the exact size of the element behind it.

I suggest introducing a background-opacity parameter so it can work without workarounds.

[Crissov]

I wish we had pseudo-elements for that:

css ::background { opacity: 80%; }

Anyway, in most cases you can simply, use a semi-transparent value for background-color or a background-image with either palette transparency or alpha channel.

PS: Itʼs really a shame browsers did not add support for the JNG format (i.e. JPEG in PNG), just because itʼs strongly associated with complex and unsuccessful MNG.

[Loirooriol]

4706 would allow things like background-filter: opacity(0.5)

[heycam]

Is using the cross-fade() function from css-images-4 sufficient?

background-image: cross-fade(50% url(photo.jpg));

[faceless2]

For completeness, another option based on the filter() method mentioned in #4706 is:

background-image: filter(url('ducky.png'), opacity(0.5));

[una]

For completeness, another option based on the filter() method mentioned in #4706 is: background-image: filter(url('ducky.png'), opacity(0.5));

I like this solution. I'd love to add filters to backgrounds here. I would use a / to differentiate from filters and backgrounds. That could also look like:

background: red / opacity(0.5) blur(10px);

[faceless2]

@una the approach you propose above is a filter on the background rather than a filter on the background-image - that's the distinction being made by the OP in #4706 as well. But your example could still be done using the filter() function:

background: filter(image(red), opacity(0.5), blur(10px));

[astearns]

Discussed with backdrop-filter in https://github.com/w3c/csswg-drafts/issues/4706#issuecomment-622174548