- Ce sujet contient 10 réponses, 4 participants et a été mis à jour pour la dernière fois par
, le il y a 10 années et 10 mois.
-
Messages
-
-
-
Bonjour,
Je pense que c'est possible en placant l'image en fond en css de cette manière :
<img src= »ICI l'image genere par draw » style= »background-image:url('ICI l'image a mettre en fond') » />ou alors (peut etre plus simple) :
<div style= »background-image:url('ICI l'image a mettre en fond') »>
appel a draw pour insérer l'image dynamique
</div>Olivier Bado-Faustin / Université Côte d’Azur
-
Merci Olivier, ça fonctionne effectivement, mais… (il y a toujours un mais
)– L'image de fond est dupliquée pour prendre toute la largeur disponible. Comment on fait pour superposer en css deux images de la même taille ?
– l'image créée par draw n'a pas de fond transparent. C'est un problème de cette fonction ou peut-être est-il possible de mettre un tel fond ? (question à la cantonade)
Damir
-
En fait, je partais du principe qu’on tente de superposer des images de même taille
Si ce n’est pas le cas, on peut modifier ainsi l’attribut style pour ne plus répéter l’image :
<div style= »background-image:url(‘ICI l’image a mettre en fond’);background-repeat:none; »>plus d’explications ici :
et pour ce qui est du fond transparent pour draw, cela semble possible puisqu’en effectuant une recherche je suis tombé la dessus :
\text{dessin_Motif= draw(400,400 xrange -1/2,1/2 yrange -1/2,1/2 transparent white motif ) }Olivier Bado-Faustin / Université Côte d’Azur
-
Yes ! Ca fonctionne, je n'avais pas vu le « transparent white ». Il y a tout de même quelques ajustements :
– c'est « background-repeat:no-repeat » et non « background-repeat:none »
– il faut, si je veux en plus centrer l'image, triturer les propriétés et ça ne semble pas simple. Je vais tout laisser à gauche, ça ira bien !
Merci encore
Damir
Olivier a écrit :
En fait, je partais du principe qu'on tente de superposer des images de même taille
Si ce n'est pas le cas, on peut modifier ainsi l'attribut style pour ne plus répéter l'image :
<div style= »background-image:url('ICI l'image a mettre en fond');background-repeat:none; »>plus d'explications ici :
-
damir a écrit :
Yes ! Ca fonctionne, je n'avais pas vu le « transparent white ». Il y a tout de même quelques ajustements :
– c'est « background-repeat:no-repeat » et non « background-repeat:none »
– il faut, si je veux en plus centrer l'image, triturer les propriétés et ça ne semble pas simple. Je vais tout laisser à gauche, ça ira bien !
bien vu pour le no-repeat.
pour centrer l'image de fond, il faudrait essayer quelque-chose comme ca :
background-position-x:50%;background-position-y:50%;ou comme ca :
background-position-x:center;background-position-y:center;ou peut être plus simplement comme ca :
background-position: center;Olivier Bado-Faustin / Université Côte d’Azur
-
-
-
Bonjour
Je procède d'une autre manière en particulier quand je veux coller une petite image sur une grande image. Ma méthode est certainement plus coûteuse, mais je suis sûre que cela ne dépendra pas du navigateur (je vais tester celle d'Olivier …)
(je double les \ je ne suis jamais sûre que cela passe dans ce forum).
En fait, j'ai fait cela pour un étudiant en Master hier (le slib n'existe pour l'instant que sur wims.u-psud.fr, mais par manque de temps, je le laisse comme cela. Dans l'exemple, paysage.png
est une image de taille 200,200.
Il y a aussi des exemples dans le « poly » développement d'exercices de la classe d'exemple
Dans ce qui suit, je n'ai pas mis xrange et yrange , aussi il s'agit du repère « image » : le 0,0 est en
haut à gauche de l'image; l'axe des y va vers le bas …
\text{limite=randitem(30,40,50,60,70,80,90,110,120)}
\text{image=paysage.png}
\text{limitetex=teximg(\fontsize{16}{18}\selectfont \(\limite\) )}
\text{limiteimg=slib(oef/insfilename \limitetex)}\integer{voiture=randitem( \limite + randint(10..20), \limite – randint(10..20))}
\text{max=120}
\real{graduation=12*\voiture/\max -6}\text{compteur=slib(draw/meter \graduation,[-6,6],[0,,20,,40,,60,,80,,100,,120], [brown,red,red,white],url)}
\text{compteurimg=slib(oef/insfilename \compteur)}\text{image=draw(400,400
fill 50,50,black
copy 0,0,-1,-1,-1,-1,\image
copy 308,104,-1,-1,-1,-1,\limiteimg
copyresized -1,-1,-1,-1,120,280,280,440,\compteurimg
)
}\draw{200,200}{
copy 0,200, -1,-1,-1,-1, , image.png
copy 100,50, -1,-1,-1,-
code flydraw …
}
-
damir a écrit :
Je n'avais pas vu tes autres propositions pour le centrage. En fait seule la proposition avec les pourcentages fonctionne bien, les autres bougent l'image de fond lorsqu'on essaye de rapetisser la fenêtre.
Correction, après un test sur plusieurs plateformes, c'est
background-position: center;
qui fonctionne partout. La version
background-position-x:50%;background-position-y:50%;
ne fonctionne pas sur Firefox et IE, mais fonctionne sur Safari.
Juste pour info…
-
-
- Vous devez être connecté pour répondre à ce sujet.