css - online - La posición de fondo del sprite de la brújula no es como yo quiero

sprites con css

Question

Estoy por primera vez usando Compass spriting. Quería que las imágenes de los iconos (todas son de diferente tamaño) estén centradas. como la imagen adjunta

Estoy usando esta configuración

$icons-spacing:40px;
@import "icons/*.png";
@include all-icons-sprites;

el CSS que estoy obteniendo es (por ejemplo)

.icons-adventure {
  background-position: 0 -608px;
}

No es eso como lo requería. Quiero dar más espacio desde la parte superior e izquierda.

Answer 1

Es posible que desee consultar este Github Gist: https://gist.github.com/adamlogic/3577147 , que me ha ayudado a solucionar problemas de sprites en el pasado y también a obtener una mejor comprensión de cómo funciona spriting en Compass.

De particular interés para usted puede ser la parte donde el autor menciona lo siguiente: (pegado aquí en caso de que se elimine la esencia)

"Llevé esto un poco más allá al definir mi propia mezcla (sprite)".

$spritemap-spacing: 50px
@import "spritemap/*.png"

=background-sprite($name, $repeat: no-repeat, $offset-x: 0, $offset-y: 0)
  background-image: $spritemap-sprites
  background-repeat: $repeat
  +sprite-background-position($spritemap-sprites, $name, $offset-x, $offset-y)

  // if no offsets given, set the dimensions of the element to match the image
  @if $offset-x == 0 and $offset-y == 0
    +sprite-dimensions($spritemap-sprites, $name)

"y cómo lo estoy usando"

// simplest case; sets the background image and dimensions of the element
h3
  +background-sprite(ribbonfull)

// custom offset; does not set the dimensions of the element
h2
  +background-sprite(ribbonend, no-repeat, 3px, 22px)

// repeating backgrounds are possible, too
#positions
  +background-sprite(doubleline, repeat-x, 0, 45px)

Y, el CSS generado por el autor:

h3 {
  background-image: url(''/images/spritemap-sb826ca2aba.png'');
  background-repeat: no-repeat;
  background-position: 0 -405px;
  height: 29px;
  width: 295px; }

h2 {
  background-image: url(''/images/spritemap-sb826ca2aba.png'');
  background-repeat: no-repeat;
  background-position: 3px -296px; }

#positions {
  background-image: url(''/images/spritemap-sb826ca2aba.png'');
  background-repeat: repeat-x;
  background-position: 0 -751px; }

Answer 2

He encontrado dos soluciones para este problema, ambas no son perfectas:

1. Simplemente puede guardar el ícono en su editor de imágenes con el relleno necesario; funciona si desea usarlo solo en un lugar; de lo contrario, debe crear duplicados (por lo que esto no siempre funciona).
2. Otra solución es usar pseudoelementos. Asumiendo es el elemento al que desea agregar el fondo y ha colocado sus iconos en la carpeta de iconos:

@import "icons/*.png";

el { 
  position: relative; 
}

el:after { 
  content: ""; 
  position: absolute; 
  left: 50%; 
  top: 50%; 
  @include icons-sprite(some_icon); 
  margin-top: - round(icons-sprite-height(some_icon) / 2); 
  margin-left: - round(icons-sprite-width(some_icon) / 2);    
}

Answer 3

Primero, una buena pregunta ...

Cuando le das sprites en CSS, podrás generar clases con .image-name . Y así es como funcionan los sprites de Compass. Su imagen se adjuntará a una gran imagen de sprite, y todas las imágenes irregulares se agruparán en una cuadrícula.

A pesar de que $icons-spacing le da la capacidad de dar algo de relleno a la grilla, no será tan fácil para usted ponerlo en este caso. Entonces, siguiendo con lo que se genera, haremos lo siguiente.

Entonces, si quieres algo como la imagen, necesitas centrar el elemento, que tiene la clase generada por la brújula.

Ahora diga, tiene adventure.png y ha generado esta clase:

.icons-adventure {
    background-position: 0 -608px;
}

Ahora, si quieres centrar esto, puedes hacerlo de esta manera.

<div class="border">
    <i class="icons-adventure"></i>
</div>

Y para la clase de border , dar relleno. Entonces, lo que quiero decir es que has envuelto la .border en la .icons-adventure los .icons-adventure . Ahora, necesita darle algo de relleno y ancho.

.border {padding: 15px; width: 40px;}

Aquí, no hay necesidad de altura, ya que la altura se cuida automáticamente. Déjame ir con un violín para que obtengas una explicación clara.

Answer 4

Si conoce el tamaño de su icono, puede establecer una altura predeterminada para todos los iconos y otorgarle a los iconos individuales un desplazamiento vertical de (altura predeterminada - altura del icono) / 2 y posición horizontal con el centro:

$sprite-spacing: 50px;
@import "compass/utilities/sprites";
@import "sprite/*.png";
@include all-sprite-sprites;
$sprite: sprite-map("sprite/*.png", $spacing: 50px);

@include sprite-sprite(myicon);
@include sprite-background-position($sprite, myicon, center, 12px);

Answer 5

Si está utilizando Bootstrap 3 simplemente use el siguiente código, es simple y limpio,

Archivo SASS

@import "compass";
$home-spacing : 10px;
$home-sprite-dimensions : true;
@import "web/images/home/*.png";
@include all-home-sprites;

Y en el archivo HTML / Slim solo uso el center-block provisto por Twitter Bootstrap 3, My HTML helper,

=content_tag(''div'','''',:class=>''home-save_money center-block'')

Básicamente, solo alinea las imágenes en el centro del div, todas las respuestas anteriores usan algunos Mixins personalizados o un hack.

PD: Incluso si no usas Twitter bootstrap, solo usa el siguiente CSS, eso haría el truco,

display: block;
margin-left: auto;
margin-right: auto;

Espero que esto ayude a alguien,

Answer 6

$icons-spacing define la cantidad de píxeles que separa cada imagen en el mapa de sprites generado. Creo que desea ajustar la posición $icons-position que ajusta (desplaza) los estilos de background-position generados