J'aimerai sur chaque image afficher les centres des images par un moyen utilisant css3 afin d'obtenir un résultat qui pourrait être celui ci par exemple:
J'ai une contrainte, je ne peux ajouter aucun autre élément html pour réaliser ceci. Je dois réaliser ceci uniquement en manipulant ma classe resize-drag grâce à du CSS.
Ca fait des heures que j'essaye mais je n'y arrive pas. J'ai essayé plein de chose avec les propriétés border-image, mais je n'ai pas réussi à obtenir un résultat satisfaisant.
Si tes images ont une taille fixe, tu peux balancer par dessus une image transparente avec les marqueurs rouges grâce à un ::after qui contient cette dernière image en background avec 100% de hauteur et largeur, position absolute, left top à 0 et display block et content: ' ';
Si c'est pas le cas malheureusement il n'y a que deux élément "cheat" qui permettent d'ajouter du contenu visuel via css, c'est ::after et ::before. Or tu as 4 éléments en plus ici, un marqueur sur chaque coté. Je ne pense pas que ce soit réalisable sans toucher au DOM.
et surtout, <img /> n'autorise pas les pseudo-éléments car c'est un élément remplacé : son contenu est ajouté après le chargement du DOM, et il écrase le contenu généré par ::after et ::before.
Sans au minimum un autre élément englobant je pense que ce qui est demandé est impossible.
Avec un pseudo-élément on peut probablement faire deux traits, via un gradient CSS entre rouge et transparent ; donc avec les deux disponibles, ça devrait se faire. Maiiiis comme dit plus haut, sur <img /> on ne peut pas.
Pas d'aide concernant le code par MP, le forum est là pour ça :)
afficher les centres sur une image
× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
× Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
Pas d'aide concernant le code par MP, le forum est là pour ça :)