如何在HTML元素的背景图像中反转颜色？

Question

我有以下div：

<div style="border-radius:50%; height:233px; width:423px; background-color:black; background-image:url(image2.gif);background-repeat:repeat; border:solid  1px; filter: invert(100%);-webkit-filter: invert(100%);"></div>

现在，我需要反转背景图像的颜色，使其看起来像：

我尝试使用

filter: invert(100%); -webkit-filter: invert(100%);

但是它反转整个div，包括边框使它看起来像：

如何仅反转背景图像的颜色而不是整个元素的颜色？

注意：以编程方式生成上述div。反转边框颜色的解决方案也需要我改变程序来反转边框的颜色，这可能是任何格式（十六进制，rgb，rgba，hsl，hsla，单词等），基本上膨胀我的码。但是，如果我没有其他选择，那么我会这样做，但首先我希望我能找到一个更简单的解决方案。

Answer 1

您可以在伪元素中设置背景，并将边框保留在div中。

这样过滤器不会影响主元素

div {
    border-radius:50%;
    height:233px;
    width:423px;
    border:solid 1px green;
    overflow: hidden;
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color:black;
    background-image:url(http://i.stack.imgur.com/xQi3T.png);
    background-position: -21px -35px;
    background-repeat:repeat;
    filter: invert(100%);
    -webkit-filter: invert(100%);
}

<div></div>