web-dev-qa-db-fra.com

Utilisation des sprites Css et de la position de l’arrière-plan

J'ai un élément div, disons de largeur 200px et de hauteur 200px. J'ai besoin d'une petite image pour apparaître dans le coin supérieur droit de la div. Comment on le ferait normalement ce serait avec

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

Cependant, le problème est que je charge l’image depuis un Sprite et que j’utilise quelque chose comme

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

le Sprite ne semble pas le choisir au bon endroit. Une autre partie du Sprite est chargée. Est-il possible de charger une image à partir d'un Sprite et d'utiliser également l'attribut background-position. Merci d'avance...

csscss-spritesbackground-position
18
Maxim Dsouza

Vous devez spécifier les coordonnées de la position de votre élément et de la position de l’arrière-plan de deux manières différentes.

#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  */
}

Avec le background-position, vous spécifiez les coordonnées de l’arrière-plan. Pour les coordonnées de votre élément, vous devez définir les propriétés left et right.

Gardez à l'esprit que pour utiliser des sprites, votre élément doit avoir la taille correcte. L'image que vous utilisez en tant qu'arrière-plan doit disposer de suffisamment d'espace pour couvrir la largeur et la hauteur de l'élément, pas plus, sinon vous verrez plus d'une image à partir de votre image de sprites.

Si vous souhaitez afficher une image plus petite que votre élément, vous avez besoin d'un élément plus petit à l'intérieur du grand.

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

Puis dans votre 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;
}
29
Jose Faeti

Vous pouvez utiliser la pseudo-classe :before comme ceci:

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

mais ceci est encore mal supporté.

Mon conseil est de créer un autre élément à l'intérieur de votre enveloppe et de le positionner absolument comme ci-dessus :before mais par exemple real div

MODIFIER

Une autre manière délicate d’utiliser des sprites dans les coins des boîtes est décrite ici 

13
avall

Si vous pouvez utiliser un préprocesseur tel que SCSS:

(mis à jour pour répondre à la question posée; voir aussi exemple en direct )

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

Pour "faire flotter" un arrière-plan d'un Sprite, comme la réponse de @ jose-faeti indique que vous devez impliquer un élément d'espace réservé }

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

avec style comme:

.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;
}

Dans ma réponse initiale, pour créer une liste de boutons , vous pourriez:

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

serait alors travailler sur quelque chose comme :

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

Vous spécifiez soit top right, soit une position de pixel exacte, pas les deux. 

En outre, vous ne pouvez pas charger une petite partie d'une image Sprite à utiliser comme arrière-plan pour un élément plus grand. Vous devrez mettre un petit élément à l'intérieur, qui a la taille du Sprite.

0
GolezTrol

vérifiez en utilisant background-Origin au lieu de background-position.

vous ne pouvez spécifier qu’une seule position d’arrière-plan et pour le moment vous en avez deux (-215px -759px) et (en haut à droite).

0
bdparrish