How can I override !important inline css?

Question

I'm editing a page and I can't 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:

<ul class="list-inline">
    <li>
       <a href="http://www.facebook.com/portoseguro" target="_blank">
         <span class="gIconSocial fb" style="background: url('https://cliente.portoseguro.com.br/static-files/Institucional/Icones/facebook_off.png') no-repeat !important;">Facebook</span>
        </a>
    </li>
</ul>

(I can't use javascript too, only css)

Answer 1

The browser gives the priority to the inline style. And, since this is with !important property you have to edit the HTML to get rid of this if you wanna do this with CSS only.

I recommend you to read more about Specificity on applying styles

Answer 2

You can hide the background image by adding the CSS background-size: 0; and try to put a background image to ul.list-inline > li > a[target=_blank]

EDIT :

rather use ul.list-inline > li > a[target] or it wont work