TL;DR You cannot revert the invert() filter by applying another invert() or a combination of other filters. First, I am going to start with a basic example and an explanation: the invert() filter is used to invert the colors by specifying the percentage of the inversion (or a value from 0 to 1). If we … Read more
Probably is a little late, but just in case I will leave you my answer. I had the same problem with Safari and I figured out that this seems to be a Safari issue/bug. You can work around this bug just wrapping your SVG tag with another HTML tag like a div and apply to … Read more
This is a confirmed Chrome bug that popped up in a recent update, and should hopefully get resolved soon. Here’s a reduced test case: https://codepen.io/chasebank/pen/KZgYXK Here’s the Chromium issue marked for triage. I think the best thing to do for now is nothing. Wait for a proper fix to be implemented. It’s never a good … Read more
Place the backdrop filter on css pseudo element. This allows nested backdrop filters. Also you can use z-index: -1; to position your backdrop behind your elemets div { height: 100px; width: 100px; } .wrapper { position: absolute; } .outer, .inner { position: relative; } .outer::before { content: ”; position: absolute; width: 100%; height: 100%; -webkit-backdrop-filter: … Read more
I tried something that seems to work. I added one black layer (rgba with alpha 0.8) on top of your image with the same width, then filtered the brightness of your image with filter: brightness(3); I am not sure whether it renders the image the way you want. body { margin: 0; padding: 0; } … Read more
The key in this case is to define an initial color. White nor black or any gray-scale is technically an actual color – you can’t saturate or rotate it. You’ll have to “colorize” it somehow, and the sepia filter is the only filter which do some form of colorizing. It would be easier if your … Read more
For a more simple and up to date answer: backdrop-filter: blur(6px); Note browser support is not perfect but in most cases a blur would be non essential.
@Dave was the first to post an answer to this (with working code), and his answer has been an invaluable source of shameless copy and pasting inspiration to me. This post began as an attempt to explain and refine @Dave’s answer, but it has since evolved into an answer of its own. My method is … Read more
If we refer to the specification we can read: A value other than none for the filter property results in the creation of a containing block for absolute and fixed positioned descendants unless the element it applies to is a document root element in the current browsing context. The list of functions are applied in … Read more
Check out this pen. You will have to use two different containers, one for the background image and the other for your content. In the example, I have created two containers, .background-image and .content. Both of them are placed with position: fixed and left: 0; right: 0;. The difference in displaying them comes from the … Read more