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:

::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 #4706 (comment)

[SebastianZ]

In #4706 it was resolved to not add a background-opacity property (neither a background-filter property) because this effect and more can already be achieved via the filter() function defined in Filter Effects 1.

An example for that function used with backgrounds looks like this:

background-image: filter(url('image.jpg'), opacity(30%));

Furthermore, in #6807 it was resolved to add an @image rule allowing arbitrary image manipulations.

@HT-7 Does this work for you?

Sebastian