title: How can I override !important inline css?
body: <p>I'm editing a page and <strong>I can't</strong> change the html, only the css, but I need to change a background-image that is declared inline with !important.
  I've already tried to declare background-image: none !important; or change bg position until it disappear and then declare the new bg image on :before pseudo-element, but it doesn't work.
  Is there any way to do this WITHOUT change the html?
  Here's the code:</p>
  
  <pre><code>&lt;ul class="list-inline"&gt;
      &lt;li&gt;
         &lt;a href="http://www.facebook.com/portoseguro" target="_blank"&gt;
           &lt;span class="gIconSocial fb" style="background: url('https://cliente.portoseguro.com.br/static-files/Institucional/Icones/facebook_off.png') no-repeat !important;"&gt;Facebook&lt;/span&gt;
          &lt;/a&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>(I can't use javascript too, only css)</p>