Problema con la imagen de fondo de CSS (la imagen no se muestra)

Question

Tengo un problema con una imagen de fondo que no se muestra.

Tengo una clase que agregué a una etiqueta de anclaje.

<a class="my-class"></a> 

y el css para la clase es:

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center 
} 

El problema es que la imagen de fondo no se muestra.

Sé que está ahí porque cuando hago esto:

<a class="my-class">&NBSP;</a> 

parte de los espectáculos de imagen.

¿Alguien tiene alguna idea sobre cómo hacer que se muestre toda la imagen sin tener que insertar muchos  , por favor?

Answer 1

<a> etiqueta es un elementoen línea y sin un contenido no se mostrará el fondo, por lo que necesita para que sea display como elemento block o inline-block y luego definir el tamaño del elemento.

intento con:

Para más información se puede comprobar la box model y la display property en el CSS 2.1 w3c standard.

También las secciones The width property y Computing widths and margins tienen una explicación de por qué el elemento no muestra el fondo en un elemento vacío en línea.

Actualización:

También el borrador de trabajo delCSS modelo de caja es available en el sitio W3C.

Actualización 2:

En una nota lateral, basándose únicamente una imagen de fondo en CSS para un enlace puede tener problemas de accesibilidad Somme .

Answer 2

Debes asignar un ancho a tu ancla. Los elementos en línea no tienen ancho si no tienen contenido.

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center; 
    width:20px; 
    height:20px; 
    display:inline-block; 
} 

Editar: y parece sin ningún contenido en absoluto sino que también es necesario establecer una altura y display:inline-block. Esto hace que el elemento se considere internamente como un elemento de bloque, pero actúa externamente como en línea.

Answer 3

El elemento tiene un ancho cero porque no tiene ningún contenido. Si la imagen contiene información útil (y realmente debería, ¡se usa como un enlace!), Usted debe poner un poco de texto dentro del enlace y utilizar cualquier técnica de reemplazo de imagen que le guste, por ejemplo:

HTML:

<a class="my-class">It‘s awesome!</a> 

CSS:

.my-class { 
    background:transparent url("../images/my-bg-image.png") no-repeat 0 center; 
    display: inline-block; /* create a block element behaving like an inline element */ 
    text-indent: -1000em; /* move the inner text outside of the link */ 
    overflow: hidden; /* prevent text visibility */ 
    width: 200px; /* image width */ 
    height: 16px; /* image height */ 
}