Cómo recortar el fondo de un elemento para mostrar solo una parte de la imagen?

Para una aclaración mira las siguientes imágenes.
El primero es lo que pretendo lograr. Es un elemento de entrada de texto con dos imágenes de fondo, una a cada lado.
La segunda imagen es la imagen de sprite que contiene los iconos que necesito.
Ahora mi pregunta es, ¿es posible recortar una imagen de fondo para mostrar solo una parte de la imagen? Además, ¿es posible usarlo con múltiples fondos?Cómo recortar el fondo de un elemento para mostrar solo una parte de la imagen?

primera imagen:
enter image description here

segunda imagen:
enter image description here

Fuente

2012-08-15 Hamed Momeni

Vas a tener que usar dos por separado ícono de imágenes para hacer que esto funcione como espera en este momento.

Con sprites CSS, el fondo está recortado por el tamaño del elemento, hay una propiedad experimental CSS3 llamada background-clip pero no funciona de la manera que desee (clip a los bordes, relleno o contenido del cuadro, no una dimensión específica.)

Cree dos iconos, utilice uno a cada lado del elemento con background-position.

As you can see here, con una hoja de sprites se mostrará toda la imagen de fondo en lugar de los dos iconos que desee. Todavía no hay forma de recortar imágenes BG de la manera que desee. (un día, con suerte!)

Fuente

2012-08-15 08:01:34 Kyle

Esto es lo que se me ocurrió.¿Estás seguro de que no hay otra manera? –

Lamentablemente, esta es la única forma, quizás algún día se implemente, pero por ahora, 2 íconos son la única manera de hacerlo :) – Kyle

¡Espero que ese día llegue pronto! Gracias. ;) –

Juego a su elemento (digamos div) yor panorama backgound y luego ajustar con background-position. Su imagen será recortada por el tamaño de su elemento (por ejemplo, div).

en su caso, será en torno a:

background-position: -87 -35;

y div tamaño:

width: 28px; height: 30px

Fuente

2012-08-15 07:59:49 Samich

Vuelva a leer la pregunta por favor. Tengo un elemento de entrada y necesito que sea tan grande como se muestra en la imagen de arriba. –

Esto es lo que estoy diciendo: http://jsfiddle.net/jg7C6/3/ – Samich

Lo entiendo ahora. Gracias. –

con CSS3 puede utilizar varias imágenes de fondo de un elemento. para mostrar una parte específica de la imagen que necesita para establecer su propiedad background-position.

por ejemplo:

background-image: url(sprites.png), url(sprites.png); 
background-position: center bottom, left top;

también puede definir background-postion en píxeles como:

background-position: -5px 10px, -35px 10px;

para más información marque esta link

Fuente

2012-08-15 07:59:56 Amyth

Gracias, pero esto no es lo que pregunté. Sé cómo usar múltiples fondos. Mi pregunta principal era cómo recortar una imagen de fondo. –

Tendrá que usar iconos separados O tendrá que tener 2 elementos adicionales (para mostrar los iconos) superpuestos en la parte superior del cuadro de entrada. Este último te permitirá usar el sprite mismo.

Fuente

2012-08-15 08:12:01 techfoobar

Este último no permitiría que el sprite se use en la 'entrada' principal sin volver a ordenar el diseño de la hoja de sprites. – Kyle

@KyleSevenoaks - El elemento sprite deberá aplicarse como fondo a los elementos superpuestos, no al cuadro de entrada en sí. Como dijiste, bg no se puede recortar con la tecnología de CSS actual. – techfoobar

Ah, ahora te entiendo. Ok, eso funcionaría, pero requeriría un margen de beneficio innecesario. – Kyle

Cómo recortar el fondo de un elemento para mostrar solo una parte de la imagen?

Respuesta

Cuestiones relacionadas