Wie invertiert man Farben im Hintergrundbild eines HTML-Elements?

Question

Ich habe folgendes div: Jetzt

<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> 

, brauche ich die Farben des Hintergrundbildes invertieren es erscheinen wie zu machen:

I

versucht mit

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

aber es invertiert die ganze div der Grenze einschließlich machen es wie folgt aussehen:

Wie kann ich die Farben nur das Hintergrundbild invertieren als derjenigen des gesamten Elements entgegengesetzt?

Hinweis: Die obige div wird programmgesteuert generiert. Die Lösung, um die Farbe des Randes auch zu invertieren, muss ich das Programm ändern, um die Farbe des Randes zu invertieren, der in jedem Format (hex, rgb, rgba, hsl, hsla, Wörter usw.) sein kann und im Wesentlichen mein blähend Code. Wenn mir jedoch keine andere Option zur Verfügung steht, würde ich es tun, aber zuerst hoffe ich, dass ich eine einfachere Lösung finden kann.

Answer 1

Sie können den Hintergrund in einem Pseudo-Element festlegen und den Rahmen im div beibehalten.

Auf diese Weise wird der Filter nicht das Hauptelement beeinflussen

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>