imagem de fundo está aparecendo no topo imagem de primeiro plano de no Opera e Chrome
-
18-09-2019 - |
Pergunta
Eu tenho uma pequena extensão de uma imagem de fundo. Esta imagem de fundo rola imagem de primeiro plano a seguir. Enquanto isso funciona perfeitamente no IE e FF, ele não funciona no Opera e Chrome.
Eu coloquei meu exemplo aqui . Consulte o bloco com 4 pequenos retângulos.
Por favor solução sugerir.
Solução
Você precisa adicionar display:block
à sua extensão.
<span style="display:block; background: url("/resources/images/strength_bgr.gif") no-repeat scroll 0pt -20px transparent;">
<img alt="test" src="/resources/images/strength.gif">
</span>
elementos Inline não tem uma altura ou largura para todo o fundo está sendo exibido em vez de ser cortada pelo tamanho da imagem.
Editar após comentários
Existe algum motivo você não pode aplicar a imagem de fundo para a própria tag img? Isso seria mais consistente cross-browser.
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow