JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    Regular Firefox logo:
    <div id="test2" class="test"></div>
    If works, you will see inverted Firefox logo:
    <div id="test1" class="test"></div>
</body>

CSS

.test {
    width: 200px;
    height: 200px;
    border: 1px red solid
}

#test1 {
    background-image: filter(url("https://mozorg.cdn.mozilla.net/media/img/firefox/new/header-firefox-high-res.d121992bf56c.png"), invert(100%));
}
#test2 {
    background-image: url("https://mozorg.cdn.mozilla.net/media/img/firefox/new/header-firefox-high-res.d121992bf56c.png");
}