css - images - sprites javascript

Usando Css Sprites y posición de fondo

Question

Tengo un elemento div, digamos de ancho 200px y alto 200px. Necesito que aparezca una pequeña imagen en la esquina superior derecha del div. Como se haría normalmente sería con

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

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

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

el sprite no parece elegirlo desde la ubicación correcta. Se carga alguna otra parte del sprite. ¿Es posible cargar una imagen desde sprite y usar también el atributo de posición de fondo? Gracias por adelantado...

Answer 1

Debe especificar las coordenadas para la posición de su elemento y la posición de fondo de dos maneras 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 la background-position se especifican las coordenadas de fondo. Para las coordenadas de su elemento, necesita establecer las propiedades left y right .

Tenga en cuenta que para poder usar sprites, 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 de la imagen grande.

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

Luego en tu 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

Echa un vistazo utilizando el origen de fondo en lugar de la posición de fondo.

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

Answer 3

Puedes usar :before pseudoclase como esta:

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

pero esto está mal apoyado todavía.

Mi consejo es hacer otro elemento dentro de su envoltura y posicionarlo absolutamente como arriba :before pero por ejemplo, div real

EDITAR

Aquí se describe otra manera difícil de usar sprites en las esquinas del cuadro.

Answer 4

Si puedes usar un preprocesador como SCSS:

(actualizado para responder realmente la pregunta formulada; también vea el ejemplo en vivo )

// ----------- 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));
}

Para "flotar" un fondo de un sprite, como la respuesta de @ jose-faeti indica que tendrías que involucrar un elemento de marcador de posición

<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, para crear una lista de botones , 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 );
    }
}

entonces trabajaría en algo como :

<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>

Answer 5

Usted especifica la posición top right o la posición exacta del píxel, no ambas.

Además, no puede cargar una pequeña parte de un sprite de imagen para usar como fondo para un elemento más grande. Tendrás que poner un pequeño elemento dentro, que tiene el tamaño del sprite.