CSS filter one background image on an element that has multiple background images-CodePudding

I've got an element with this css. It works great, but I want to blur the image that is set to cover. I can't find a way to apply filters to just one background image. I realize I could probably set it up with ::before or ::after, but I was really hoping there was a clean solution to make it part of the css one-liner here. I did some research, but didn't find any information about this. Is there some fancy css wizardry nowadays that can do this?

background: url($img) center/contain no-repeat, url($img) center/cover;

I'm hoping to be able to do something like this:

background: url($img) center/contain no-repeat, url($img) center/cover blur(20px);

CodePudding user response：

What you want can be done like below using filter()

background: 
  url($img) center/contain no-repeat,
  filter(url($img), blur(20px)) center/cover;

But no browser support for this right now: https://caniuse.com/css-filter-function