immagine di sfondo sta comparendo in cima alla priorità alta a Opera e Chrome

Question

Ho un piccolo arco di un'immagine di sfondo con. Questa immagine di sfondo scorre immagine in primo piano di sotto. Anche se questo funziona perfettamente in IE e FF, non funziona in Opera e Chrome.

Ho messo il mio esempio qui . Si prega di consultare il blocco con 4 piccoli rettangoli.

Si prega di suggerire una soluzione.

Answer 1

È necessario aggiungere display:block al vostro arco.

<span style="display:block; background: url(&quot;/resources/images/strength_bgr.gif&quot;) no-repeat scroll 0pt -20px transparent;">
  <img alt="test" src="/resources/images/strength.gif">
</span>

elementi inline non hanno un'altezza o larghezza in modo l'intero sfondo viene visualizzato invece di essere tagliate dalla dimensione dell'immagine.

---

Modifica dopo i commenti

C'è qualche motivo non è possibile applicare l'immagine di sfondo per il tag img stessa? Sarebbe più coerente cross-browser.