Est-il possible d'utiliser des sprites CSS pour des images de «premier plan», c'est-à-dire des images sur lesquelles les utilisateurs sont censés cliquer, interagir et même imprimer?CSS Sprites - pas seulement pour les images de fond?
Au lieu d'utiliser la propriété CSS background-image. Que utiliseriez-vous?
Vous pouvez utiliser une étiquette standard <img /> et la placer dans un conteneur (comme un <div />) avec une hauteur/largeur limitée. Utilisez ensuite le positionnement relatif ou les marges négatives pour contrôler la position de l'image.
Vous pouvez le faire, mais vous devez utiliser des images d'arrière-plan pour les sprites, car vous devez pouvoir définir la position. Cela peut être utilisé pour les liens ou tout ce que vous voulez. Regardez sprite Googles, ils l'utilisent pour là des boutons sur iGoogle: http://img0.gmodules.com/ig/images/v2/sprite0_classic.gif
-1 Vous pouvez contrôler la position de n'importe quel élément en utilisant 'position' dans CSS en combinaison avec' top, left, right, bottom'. Alternativement, vous pouvez utiliser des marges négatives. –
Je n'ai jamais dit que vous pouviez: t contrôler la position dans n'importe quel élément. Cependant, vous pouvez le faire fonctionner avec des images d'arrière-plan sur n'importe quel élément. –
Bien sûr, vous pouvez, mais ils demandent spécifiquement comment le faire * sans * images de fond! –
Vous pouvez le faire avec moins CSS comme ceci:
.myClass { background: url(../Images/Sprite.png) no-repeat;
height: 20px;
width: 40px;
background-position: -40px 0;
display: block; }
.myClass:hover { background-position: -40px -20px; }
Quelle que soit a la classe class="myClass" aura juste l'image, rien autre. Cela peut être un <a> un <input> ou un <div> normal, ce que vous voulez.
C'est une image de fond ... mais c'est l'élément que vous regardez, rien n'est en face de ce contexte. Ce n'est pas parce que vous utilisez background-image pour la propriété que ce n'est pas un élément de premier plan ... comme un bouton sur lequel vous pouvez cliquer. Vous pouvez le faire comme ceci:
<input type="button" class="myClass" />
C'est une solution basée sur l'image d'arrière-plan, peu importe comment vous tournez ceci. La question demande explicitement autre chose. Et je comprends en quelque sorte pourquoi - il y a évidemment une différence fondamentale entre les images qui font partie du contenu du document et celles qui font partie de sa mise en page et de son style. – amn
Une exigence principale qui ne peut pas être traitée par les images d'arrière-plan est pour ARIA. Toutes les exigences de l'ARIA rejetteront l'utilisation d'images de fond pour des utilisations significatives, de navigation et autres «informatives» qu'un lecteur d'écran doit interpréter au nom d'un utilisateur ayant un handicap. La possibilité d'échanger une déclaration CSS d'image de fond pour une balise img et un étiquetage ARIA chaque fois que nécessaire est une caractéristique essentielle dans l'environnement de développement régulé actuel. La réponse à la question d'origine est oui! Il est possible d'utiliser l'image affichée dans une instruction d'arrière-plan css. Mais vous devez ouvrir l'image d'image-objet dans un éditeur d'image et sélectionner la partie qui représente l'image-objet que vous souhaitez et l'enregistrer en tant qu'image distincte et la référencer dans une balise img. Le problème est que, souvent, ces situations se produisent dans une bibliothèque de contrôle prédéfinie. Trouver et modifier le code dans la bibliothèque qui sélectionne et affiche l'image d'arrière-plan est un peu difficile, changer le code est difficile!
Génie, merci !! – Summer
Ceci est trop IMO, vous pouvez simplement définir l'entrée pour afficher le bloc et supprimer le div/wrapper hors de l'équation tous ensemble, c'est une approche beaucoup plus simple. –
@Nick Cela n'a aucun sens. Comment appliqueriez-vous un sprite sans utiliser le conteneur? –