[résolu] Afficher une image par dessus du texte

Bonjour à tous

j'ai un petit problème pratique : je voudrais placer une image transparent par dessus un texte (par exemple pour barrer le texte) et j'aimerais savoir s'il existe une manière simple et propre de faire ça en css avant de commencer a superposer des bouts de trucs pas très clean ^^

merci d'avance
Modifié par Elianora la blanche (19 Apr 2007 - 12:16)

Elianora la blanche a écrit :
j'aimerais savoir s'il existe une manière simple et propre de faire ça en css

Non, pas vraiment.
Ça sera nécessairement une bidouille, et j'ai quelques doutes sur le résultat (même si j'ai une piste ou deux en tête).

Je rappelle au cas où que l'élément HTML del permet d'indiquer un texte «supprimé» (information erronée ou plus à jour publiée antérieurement, par exemple). Si l'effet est purement cosmétique, on pourra passer par la propriété CSS text-decoration: line-through.

Question intéressante auquelle je n'avais jamais réfléchi mais qui peut s'avérer très utile

Si tu attribues au texte un z-index:1; et à ton image un z-index:2; il se passe quoi ?

BeliG a écrit :
Si tu attribues au texte un z-index:1; et à ton image un z-index:2; il se passe quoi ?

Il faut que texte et images soient positionnés (par exemple l'un en relatif, l'autre en absolu...), sinon les z-index n'auront pas d'effet.

BeliG a écrit :
Question intéressante auquelle je n'avais jamais réfléchi mais qui peut s'avérer très utile

Si tu attribues au texte un z-index:1; et à ton image un z-index:2; il se passe quoi ?

pas grand-chose de remarquable car les deux seront côte à côte et non l'un sur l'autre

je pense que Florent a raison : je vais devoir bidouiller car c'est pour le style que je dois utiliser une image

Elianora la blanche a écrit :

pas grand-chose de remarquable car les deux seront côte à côte et non l'un sur l'autre

Ben après c'est à toi de les superposer en jouant avec les positions, ma solutions avec les z-index supposaient que tes élèments étaient correctement placés...
Modifié par BeliG (18 Apr 2007 - 17:16)

Une solution possible (même si pas satisfaisante) : un conteneur de type bloc ou en display: block, avec :
- un span vide ;
- du texte.

[b]HTML :[/b]
<p>Un paragraphe avec <del class="special"><span></span>du texte barré</del>.</p>

[b]CSS :[/b]
del.special {
text-decoration: none;
display: block;
}
del.special span {
position: absolute;
width: 100%;
height: 100%;
background: url(images/fond-barre.png) repeat-x left center;
}

Mais passer le texte barré en display: block, c'est pas terrible.

hello !

merci Florent mais vraiment ce n'etait pas possible de faire comme tu le proposais car j'ai un design en flotant et le texte ne pouvait pas etre mis en block

j'ai placé le texte dans un div en position relative et l'image en position abolute

<div class="ancien_texte">
	texte à barrer<img class="barre" src="templates/images/barre.gif" alt="" />
</div>

et la css

.ancien_texte {
	font-size: 2em;
	font-weight: bold;
	display: inline;
	position: relative;
	left: 0;
	top: 0;
}

.barre {
	position: absolute;
	left: 0;
	top: 5px !important;
	top: 15px;
}

merci encore

Je rappelle au passage que l'élément del peut avoir une utilité...