Sprites CSS - utilizando sólo una parte de una imagen como fondo de parte de un elemento

que utilizo el CSS Sprite Technique una imagen de fondo que se ve algo como esto con:Sprites CSS - utilizando sólo una parte de una imagen como fondo de parte de un elemento

enter image description here

El código CSS para los iconos :

div.icon { 
    background-color: transparent; 
    background-image: url("/images/icons.png"); 
    background-position: 0 0; 
    background-repeat: no-repeat; 
    display: inline-block; 
    height: auto; 
    vertical-align: text-top; 
    width: auto; 
} 
div.icon:empty { 
    width:16px; 
    height:16px; 
} 
div.icon:not(:empty) { 
    padding-left:20px; 
} 
div.icon.attenuation { 
    background-position: 0 0; 
}

Mis iconos pueden ser utilizados como esto:

<div class="icon warning"></div>

Quiero poner un poco de texto dentro de mis iconos como:

<div class="icon warning">There is a warning on this page</div>

Pero el problema es que la imagen de fondo cubre toda el área de texto:

enter image description here

La pregunta es: Como puedo usar solo parte de una imagen como imagen de fondo para parte de mi elemento?

Notas:

ajuste width-16px para div.icon no ayuda.

Fuente

2012-05-07 AlexStack

Tienes dos maneras:

1) su margen de beneficio debe ser así:

<div class="icon warning"></div><div class="txt">There is a warning on this page</div> 
.icon {width:10px(for ex.)}

2) Debe cambiar th e imagen. Los iconos en la imagen deben estar debajo del otro

Fuente

2012-05-07 12:04:59 jumancy

Eso pondrá el texto debajo del ícono, pensé que tenía que estar a la derecha de eso. –

estás equivocado. .icon y.txt Ambos deben tener visualización: bloque en línea y texto estarán en el lado derecho del ícono – jumancy

Si '.txt' tiene' display: inline-block', entonces sí. –

Lo siento, mi respuesta anterior no fue muy buena.

Edit: Si tiene un relleno de 16px, debe establecer el ancho en 0, no en 16px. Y tengo problemas para que el bit :not(:empty) funcione en todos los navegadores; Mejor deshazte de eso. Por lo que la CSS se convierte en:

.icon { 
    ... 
    width:0; height:16px; padding-left:16px; 
} 
.icon:empty { 
    width:16px; padding-left:0; 
}

jsFiddle

Fuente

2012-05-07 11:58:42

hay un problema con este método. Ver este violín: http://jsfiddle.net/ZGYgF/2/ – AlexStack

Ya veo. Puede eliminar 'display: inline-block' del CSS, que lo resolverá. Pero vi otro problema: tan pronto como pones más de una palabra allí, cada una de las palabras se muestra en una nueva línea. Entonces la respuesta de jumancy es mejor, incluso si tiene más marcado. –

-1

conjunto width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; y quitar padding

Fuente

2012-05-07 11:59:21 simoncereska

Amigo quiere el texto allí, no al revés. –

lo siento, el Sr. Lister está en lo cierto, no soy – simoncereska

Recuerde, siempre que sea posible, no debe cambiar su marcado solo para lograr un diseño. Es posible usar su marcado.

div.icon:before { 
    content: ""; 
    background-color: transparent; 
    background-image: url("/images/icons.png"); 
    display: inline-block; 
    height: 16px; 
    vertical-align: text-top; 
    width: 16px; 
} 

div.icon:not(:empty):before { 
    margin-right: 4px; 
} 

div.icon.attenuation { 
    background-position: 0 0; 
}

Fuente

2012-06-14 10:02:26

Sprites CSS - utilizando sólo una parte de una imagen como fondo de parte de un elemento

Respuesta

Cuestiones relacionadas