est-il possible d'utiliser des sprites CSS pour des images "au premier plan" - c'est-à-dire des images que les utilisateurs sont censés cliquer sur et interagir avec et peut-être même imprimer?
au lieu d'utiliser le CSS image-image-image propriété. Qu'auriez-vous utiliser?
6 Réponses :
Vous pouvez utiliser une balise standard et le mettre dans un conteneur (comme un
) avec une hauteur / largeur limitée. Utilisez ensuite un positionnement relatif ou des marges négatives pour contrôler la position de l'image.
Ceci est Overkill OMI, vous pouvez simplement définir l'entrée dans le bloc d'affichage et retirer la DIV / wrapper de l'équation entièrement ensemble, c'est une approche beaucoup plus simple.
@Nick qui n'a aucun sens. Comment appliqueriez-vous un sprite sans utiliser le conteneur?
@Josh - Il suffit d'utiliser la propriété de position de fond, je le fais tout le temps et c'est beaucoup plus simple et toujours valide CSS dans chaque navigateur. Par exemple sur un bouton: .Myimg {fond: url (../ images / sprite.png) non répétée; Hauteur: 20px; largeur: 40px; arrière-plan-position: -40px 0; bloc de visualisation; } .Myimg: Hover {Fond-Position: -40px -20px; } c'est une image et une survol avec beaucoup moins de code et de balisage, il suffit de besoin d'un
@Nick - mais alors c'est vraiment une image d'arrière-plan, n'est-ce pas?
Mieux encore, utilisez l'emballage DIV mais retirez l'IMG de l'équation toutes ensemble. Utilisez la propriété CSS Fond-image à la place! Ce qui est important, c'est que le div se situe dans le "premier plan", ce qui signifie l'élément le plus haut. Pas la technique utilisée.
@Summer: Oui c'est une image d'arrière-plan mais un "premier plan" div. Imaginez que la DIV comme un img virtuel dans votre esprit. Le problème n'est que dans votre esprit, pas sur la page.
@Summer - J'ai ajouté une réponse pour expliquer cela un peu mieux, le formatage des commentaires est .... Manquant.
@slebetman Je ne veux pas que des images soient en arrière-plan, en partie parce que c'est une page que les personnes sont susceptibles d'imprimer et la plupart des navigateurs n'impriment pas les images de fond par défaut.
@slebetman Ouais vient de tout supprimer et rendez votre site entier de divs avec des images de fond! La sémantique signifie-t-elle quelque chose pour vous ?! Qu'en est-il du comportement par défaut de soumettre le formulaire lorsqu'un type d'entrée = "image" est cliqué? Que diriez-vous d'alterner le texte pour les aveugles?
@JOSH - Qui a dit que vous ne pouvez pas avoir de titre = "" sur n'importe quel élément? Les lecteurs d'écran trouvent cela aussi. @Summer - Ce n'est pas vrai dans la plupart des cas, essayez simplement l'aperçu d'impression sur YouTube, c'est surtout une seule carte d'image à l'aide de l'arrière-plan comme nous parlons de: s.ytimg.com/yt/img/master-vfl149944.png
@Nick alors quoi? En fin de compte: le lecteur n'a aucun moyen de dire que le but de l'élément est d'afficher une image! Qu'en est-il des images hors scénario? Qu'en est-il du comportement par défaut / de la coiffage des éléments d'entrée? Il ne sert à rien de jeter tout cela juste pour dire que vous avez utilisé une image d'arrière-plan. Maintenant, commencez à cesser de battre ce cheval mort, l'Asker a la solution qu'ils recherchent. Il y a des raisons légitimes pour éviter les images de fond et j'ai fourni une solution pour le faire entourer car j'ai dû le faire pour les clients dans le passé. Nous pouvons passer maintenant.
@JOSH - Vous pouvez faire comme vous s'il vous plaît bien sûr, vous permettez simplement de vous faire savoir qu'il y a moins de CSS, moins de balisage, d'une manière compatible avec l'écran et de l'imprimante. Refuser de croire qu'il y a plus d'un moyen de faire quelque chose (et correctement à cela) n'est pas une grande attitude à avoir dans le monde de la programmation.
Cool, cela fonctionne lors de la création de cercles de carte HTML et de polygones (et ne voulez pas approcher de places positionnées en utilisant des techniques de CSS plus courantes)
Cela aide également à une question d'accessibilité qui est venue pour un client; Ils devaient répondre aux personnes qui utilisent des extensions qui changent de fond; utiliser des sprites CSS dans ce cas rendrait l'image disparaître; L'utilisation de la méthode décrite par @joshstodola s'assure que l'image reste là. Merci!
Pour une mise en œuvre de la réponse de @joshstodola, veuillez consulter mon violon: jsfiddle.net/sayanb/euf7hqko3 / 14 . J'ai défini une hauteur et une largeur fixes sur le conteneur div et définir son débordement sur caché. Ensuite, j'ai déplacé l'image enfant pour en faire une partie.
Vous pouvez le faire, mais vous devez utiliser des images d'arrière-plan pour les sprites car vous devez être capable de définir la position. Cela peut être utilisé pour des liens ou tout ce que vous voulez. Regardez Googles Sprite, 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 tout élément à l'aide de la position dans CSS en combinaison avec haut, gauche, droite, bas . Alternativement, vous pouvez utiliser des marges négatives.
Je n'ai jamais dit que vous pouviez la position de contrôle dans n'importe quel élément. Cependant, vous pouvez le faire fonctionner avec des images de fond 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 de CSS comme ceci:
<input type="button" class="myClass" />
C'est une solution basée sur l'image de fond, peu importe la façon dont vous tournez cela. La question demande explicitement quelque chose d'autre. Et je comprends quelque chose pourquoi - il y a évidemment la différence fondamentale entre les images qui font partie du contenu du document et de ceux qui font partie de sa mise en page et de son style.
Une exigence principale qui ne peut pas être traitée par des images d'arrière-plan est pour Aria. Toutes les exigences de l'ARIA rejeteront l'utilisation d'images de fond pour des utilisations significatives, de navigation et d'autres "informatives" qu'un lecteur d'écran doit interpréter pour le compte d'un utilisateur handicapé. Être capable d'échanger une image de base de l'image CSS pour une balise IMG et un étiquetage de l'ARIA chaque fois que nécessaire est une caractéristique essentielle de l'environnement de développement réglementé actuel.
La réponse à la question initiale est oui ! Il est possible d'utiliser l'image affichée dans une instruction de fond CSS. Mais vous devez ouvrir l'image Sprite dans un éditeur d'image et sélectionner la partie qui représente le sprite que vous souhaitez et enregistrer comme une image séparée et la référencez-la dans une balise IMG.
Le défi est que ces situations se posent souvent dans une bibliothèque de contrôle pré-construite. Trouver et modifier le code dans la bibliothèque qui sélectionne et affiche l'image d'arrière-plan est un peu difficile, changeant le code est difficile!
J'ai résolu ce problème à l'aide des balises IMG et à l'aide des propriétés d'objet-ajustement et d'objet dans mon CSS. Voici un échantillon de HTML et CSS que j'ai utilisé: -
HTML P>
.sprite-icon {
height: 20px;
width: 20px;
object-fit: none;
}
.sprite-icon-1 {
object-position: 0 0;
}
.sprite-icon-2 {
object-position: -20px 0;
}
Ne fonctionnera pas dans IE (si cela est toujours pertinent pour votre projet), sinon une excellente solution.
@ waughaugh's réponse https://stackoverflow.com/a/50715682/2733244 en utilisant démo complète: https://jsfiddle.net/wortwart/8omfcyxb/10/ Utilisation d'images" réelles "au lieu de fond est souvent sémantiquement mieux (par exemple pour les icônes) et peut avoir des avantages pour l'accessibilité: si l'image n'a pas été chargée ni bloquée par l'utilisateur, nous avons toujours La meilleure approche bien sûr consiste à saisir des sprites CSS et de charger simplement les images séparément avec http / 2. objet-ajustement et OBJECT-POSITION est une solution simple et solide pour ce problème. Son seul inconvénient est qu'il ne soutiendra pas de nouveaux navigateurs. Si vous avez toujours besoin de cibler IE11, vous pouvez plutôt travailler avec clip-chemins et margins négatifs: 's intégré
alt description. L'accessibilité est plus que des scénaristes ...