¿Es posible ocultar el área específica de una imagen de sprite de fondo de CSS utilizando un clip?

Question

¿Es posible ocultar el área específica de CSSbackground image usando clip? por ejemplo, tengo varios íconos en la imagen pero quiero mostrar solo un ícono. Debido a que el área de Div es mayor que el tamaño del icono, también se muestran otros íconos innecesarios. ¿Puedo ocultarlos sin hacer otra imagen para ese solo icono?

jsFiddle http://jsfiddle.net/jitendravyas/FyMW6/1/

Answer 1

Básicamente se crea un contenedor para cada imagen que se utiliza para dictar el área de la imagen.

http://jsfiddle.net/FyMW6/4/

HTML:

<div class="button"> 
    <div class="text">Lorem ipsum dolor sit amet</div> 
    <div id="house" class="icons"></div> 
</div> 

CSS:

.button {  
    width: 300px; 
    float: left; 
    border:1px solid red 
} 

.text { 
    float: left; 
    width: 245px; 
} 

.icons { 
    background-image: url("http://www.smtusa.com/uploads/cssexample.jpg"); 
    background-repeat: no-repeat; 

    width: 50px; 
    height: 50px; 
    float: right; 
} 

#house { 
    background-position: -56px -45px; 
} 

#gear { 
    background-position: -56px -106px; 
} 

Answer 2

No, no lo creo, al menos no en CSS2.

No puede aplicar la propiedad clip a una imagen de fondo.

CSS3 tiene la propiedad background-clip que parece hacer exactamente lo que necesita. Viene con soporte de navegador limitado en este momento, sin embargo. CSS tiene la propiedad background-clip pero solo permite especificar en qué cuadro delimitador se representa la imagen.

Puede que no haya ninguna solución para esto excepto que se use otro contenedor para el icono.

Answer 3

forma más fácil es establecer la clase de display: none;