Cross browser CSS3 Filters

I have a css class that goes like this:

Code:

---

                        .intro .background-image {
                          background: url(bg.jpg) no-repeat center fixed;
                          background-size: cover;
                          filter: blur(3px) opacity(80%) brightness(30%);
                        }

---

Which is all good, except I need to support Internet Explorer 10 and 11 and other browsers from that era which means that the filter effects on the last line won't work. So while I could do the high contrast hack like this

Code:

---

    @media screen and (-ms-high-contrast:none), (-ms-high-contrast: active) {
    .foo { color: green }
    *::-ms-backdrop, .foo { color: red }
    }

---

I feel like that is a dirty way and cuts into useability (or whatever) and prefer not to do it like that. Ideally, I feel like there could be a plain javascript polyfill that backfills css3 features with javascript so it can work in both current and older browsers. Also on that note, if the mods need to move this to the javascript subforum go ahead, or I can create one there.