Il est possible d'insérer une image transparente
(format .gif ou .png)
en surimpression sur le texte d'une page web.
La solution est d'affecter à l'image insérée (balise <img>
le style absolute comme ceci :
<img style="position:
absolute;" src="nom_ de_l
'image.png">
Dans BlueGriffon cet attribut peut se donner à partir du panneau Styles CSS dans la section Position et Organisation.
Mode opératoire
Situation 1 : l'image en surimpression est insérée d'une façon ponctuelle
Insérer l'image "nom_de_l'image" via la commande : Insertion, Image
Cliquer sur l'image pour la sélectionner <img> est sélectionné dans la barre de structure
Afficher le panneau Styles CSS via la commande : Panneaux, Feuilles de Styles
Sélectionner l'option Appliquer les styles à : cet élément via ses styles CSS embarqués.
Activer la section Position et Organisation.
Cliquer sur la Position Absolue
<img style="position:
absolute;" alt="" src="nom_ de_l'image".png>
Par défaut l'image s'aligne à gauche sur le document.
Pour décaler l'image, affecter une valeur en pixels à l'attribut Déports dans la même
section Position et Organisation.
Par exemple : si on a attribué la valeur 500
px à l'attribut Déport gauche, on doit obtenir ceci :
<img style="position:
absolute; left: 500px;" alt=""
src="nom_ de_l
'image.png">
Situation 2 : l'image en surimpression est souvent utilisée
La solution est de créer une classe
Le mode opératoire est le même que ci-dessus sauf au niveau du choix d'option Appliquer les styles à: (en 4), il faut sélectionner tous les éléments de la classe et donner un nom à cette classe.
Lors de l'insertion d'une image que l'on souhaite voir afficher en surimpression, il suffira de lui attribuer le nom de cette classe.
Un exemple sur cette page : ../Details/fiches_astuces_code.php
Dernière mise à jour le 19/12/2015