Uso de Css Sprites y posición de fondo

Question

Tengo un elemento div, por ejemplo, de ancho 200px y alto 200px. Necesito una pequeña imagen para que aparezca en la esquina superior derecha de la div. ¿Cómo uno normalmente hacerlo sería con

background: url(/images/imagepath.png) top right; 

Sin embargo, el problema es que estoy cargando la imagen de un sprite y cuando uso algo así como

background: url(/web/images/imagepath.png) -215px -759px top right; 

el sprite no se parece a recogerlo a partir la ubicación correcta. Alguna otra parte del sprite está cargada. ¿Es posible cargar una imagen de sprite y también usar el atributo de posición de fondo? Gracias de antemano ...

Answer 1

Debe especificar las coordenadas para la posición de su elemento y la posición de fondo de dos formas diferentes.

#yourimage { 
    background-image: url(/web/images/imagepath.png); 
    /* background coordinates */ 
    background-position: -215px -759px; 

    /* element coordinates */ 
    position:absolute; 
    left: 0; /* 0px from the left */ 
    top: 0; /* 0px from the top */ 
} 

Con el background-position, especifique las coordenadas de fondo. Para las coordenadas de su elemento, debe establecer las propiedades left y right.

Tenga en cuenta que para usar los elementos, su elemento debe ser del tamaño correcto. La imagen que está utilizando como fondo debe tener suficiente espacio para cubrir el ancho y la altura del elemento, no más, de lo contrario, verá más de una imagen de su imagen de sprites.

Si desea mostrar una imagen más pequeña que su elemento, necesita un elemento más pequeño dentro del grande.

<div id="container"> 
    <div class="background"></div> 
    my content here 
</div> 

Luego, en el CSS

#container { 
    position:relative; 
    width: 200px; /* size of your big element */ 
    height: 200px; 
} 
#container .background { 
    background: url(/web/images/imagepath.png) -215px -759px; 
    width: 50px; /* width and height of the sprite image you want to display */ 
    height: 50px; 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

Answer 2

Especifique top right o una posición de píxel exacta, no ambas.

Además, no puede cargar una pequeña porción de un elemento de imagen para usarlo como fondo de un elemento más grande. Tendrás que poner un pequeño elemento dentro, que tenga el tamaño del sprite.

Answer 3

Puede utilizar :before pseudoclass así:

.element:before { 
    content:""; 
    position:absolute; 
    right:0; 
    top:0; 
    width:20px; 
    height:20px; 
    background: url(/web/images/imagepath.png) -215px -759px; 
} 

pero esto no está bien soportado todavía.

Mi consejo es hacer otro elemento dentro de su envoltura y la posición absolutamente igual que anteriormente :before pero por ejemplo verdadera div

EDITAR

Otra forma complicada de usar sprites en esquinas de la caja es described here.

Answer 4

la salida usando fondo de origen en lugar de background-position.

solo se puede especificar una posición de fondo, y ahora tiene dos (-215px -759px) y (arriba a la derecha).

Answer 5

Si puede utilizar un preprocesador como SCSS:

(actualizado para realmente responder a la pregunta planteada; también ver live example)

// ----------- only things you need to edit { --------------- 
$sprite-size: 16px; // standard sprite tile size 
$sprite-padding: 0px; // if you have padding between tiles 
// ----------- } only things you need to edit --------------- 

// basic sprite properties (extension-only class) 
%sprite { 
    width:$sprite-size; height:$sprite-size; // must restrict viewport, otherwise other sprites may "bleed through" 
    // could set shared standard tilesheet `background-image: url(...)` 
    // other standard styles, like `display:inline-block` or `position:absolute` 
} 

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math 
@mixin sprite-offset($xoffset:0, $yoffset:0, $increment:$sprite-size, $padding: $sprite-padding) { 
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding)); 
} 

---

"flotar" un fondo de una sprite, como the answer by @jose-faeti indica que tendrías que involve a placeholder element

<div class="float-bg"> 
    <div class="bg"></div> 
    <p>Lorem ipsum dolor si...</p> 
</div> 

con estilo como:

.float-bg .bg { 
    @extend %sprite; // apply sizing properties 
    background-image: url(...); // actually set the background tiles 

    @include sprite-offset(4); 

    // specific configuration per accepted answer 
    position:absolute; 
    top: 0; 
    right: 0; 
} 

---

En mi respuesta original, a create a list of buttons, usted podría:

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky'; 

.btns > * { @extend %sprite; background-image:... } // apply sizing properties, bg 

// autoassigns positioning 
@for $i from 1 through length($buttons) { 
    $btn: nth($buttons, $i); 
    .btn-#{$btn} { 
     // @extend .sprite; 
     @include sprite-offset($i - 1); 
    } 
} 

sería luego trabajar en something like:

<ul class="btns"> 
    <li class="btn-help">...</li> 
    <li class="btn-font">...</li> 
    <li class="btn-save">...</li> 
    <li class="btn-export">...</li> 
    <li class="btn-etc">...</li> 
    <li class="btn-etc">...</li> 
</ul>