title: How to invert colors in background image of a HTML element?
body: <p>I have the following <code>div</code>:</p>
  
  <pre><code>&lt;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%);"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/xQi3T.png" alt="enter image description here"></p>
  
  <p>Now, I need to invert the colors of the background image to make it appear like:
  <img src="https://i.stack.imgur.com/V1enN.png" alt="enter image description here"></p>
  
  <p>I tried using </p>
  
  <p><code>filter: invert(100%);
  -webkit-filter: invert(100%);</code></p>
  
  <p>but it inverts the whole <code>div</code> including the border making it look like:
  <img src="https://i.stack.imgur.com/hOwZj.png" alt="enter image description here"></p>
  
  <p>How can I invert the colors of only the background image as opposed to that of the whole element?</p>
  
  <p><strong>Note:</strong> The above <code>div</code> is programmatically generated. The solution to invert the color of the border as well will need me to change the program to invert the color of the border, which may be in any format (hex, rgb, rgba, hsl, hsla, words etc), essentially bloating my code. However if no other option is available to me then I would do it but first I am hoping I can find a simpler solution.</p>