CSS: utiliser des images-objets avec des pseudo-classes css: avant et: après

Je n'ai jamais essayé avant. J'ai créé une image sprite contient deux icônes. Chaque icône est 26px de large et de haut. Si le sprite est 26x52px.

J'ai un élément qui est dans un div.quelque chose ou dans une div.quoi que ce soit. Selon la classe qu'il est dans je veux ajouter un coin de la pac vers la gauche ou la droite.

Ainsi donc, je suis le positionnement de l' .élément parent, appliquer le :before pseudoclass de l'img et de la position absolue avec une hauteur et une largeur de 26px de sorte qu'une seule icône de l'image-objet s'inscrit dans. J'ai également "overflow:hidden" afin de masquer la deuxième icône sur le sprite.

.element {
    position:relative;
}

.element:before{
    content: url("../images/sprite.png");
    position: absolute;
    height:26px;
    width:26px;
    overflow:hidden;
}

.something .element:before {
    top: -2px;
    left: -2px;
}

anything .element:before {
    top: -28px;
    right: -2px;
}

Cela fonctionne très bien pour la gauche-coin où j'utilise la première icône dans le sprite.
Mais maintenant je me demande comment je peux afficher uniquement la deuxième icône dans le sprite pour le "quoi que ce soit .l'élément".

Donc en fait le "masque" doit être placé au -2px, -2px mais le sprite img à l'intérieur devrait commencer à 26px de sorte que la deuxième icône est affichée.

Est-ce possible avec le css de la façon dont je suis en train de faire maintenant?

source d'informationauteur matt

  1. 26

    Ne pas utiliser content pour insérer votre image, que vous ne pouvez pas modifier sa position. Au lieu de cela, définir le contenu de " " et ajouter le sprite comme une image d'arrière-plan. Vous pouvez ensuite utiliser la background-position propriété pour déplacer le sprite à la position correcte. Sinon, votre exemple devrait être fonctionne correctement.

    Un travail de démonstration:

    http://jsfiddle.net/RvRxY/1/

  2. 3

    De soutien pour :before et :after éléments pseudo sur les balises img est limité, si existant sur la plupart des navigateurs.

    La meilleure solution serait de placer votre img à l'intérieur d'un div, et puis demandez à la classe appliquée à l'div, plutôt que de l'img.

    Vous avez presque l'utilisation de la pseudo-élément correct. Vous pouvez donner à ceci un essai:

    .somediv { position:relative;}

.somediv:before {
  position: absolute;
  content: '';
  height: 26px;
  width: 26px;
  top: 0;
}

.somediv.foo1:before { 
  background: url("../images/sprite.png") no-repeat -2px -2px;
  left: 0;
}

.somediv.foo2:before { 
  background: url("../images/sprite.png") no-repeat -2px -28px;
  right: 0;
}

    Utiliser l'arrière-plan:; propriété plutôt que le contenu:; propriété de sorte que vous pouvez positionner le sprite au sein de l' :avant de pseudo-élément.

    gauche:; à droite:;:; doit être utilisé pour le positionnement absolu de la pseudo-élément par rapport à ses parents.somediv).

    Plaçant un 1px bordure autour de votre pseudo élément va vous aider à comprendre les différentes positionnement 🙂