Ecriture opaque sur fond transparent

**Une.Personne** · 12/03/2013, 18h58

Bonjour/Bonsoir,

Ce serait pour une tite question

(sans blague

)

Je souhaiterais avoir une couleur d'écriture bien opaque sur un fond semi-transparent.

sachant que ma structure est ainsi :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<div style='width:... ;height: ... ;opacity: 0.6; '>
<table>
<tr>
<td style='color:green;'>
coucou
</td>
</tr>
</table>
</div>

Le vert n'étant bien entendu pas aussi étincelant que si il était situé sur un fond opaque.

Si une personne passe par ici avec des idées

ps: j'ai déjà essayé z-index, mais rien n'y a fait.

Bonne soirée/journée.

**johnrock** · 12/03/2013, 21h30

je ne sais pas du tout si c'est ce que tu veux mais tu peux essayer ce car je l'ai fais le plus simplement possible pour t'aider.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<title>essai</title>
<style>
h1 {
text-shadow:1px 1px 2px gray;
color: #c0c0ff;
}
</style>
</head>
<body style="background: url(ton image) no-repeat center; margin: 250px; border: 3px black;">
 
<div align="center" style="width: 500px; height: 100px;opacity: 0.6; background: black; margin-left: 5px; margin-right: 5px;">
<table>
<tr>
<td>
<h1> Coucou !! </h1>
</td>
</tr>
</table>
</div>
 
</body>
</html>

**Une.Personne** · 12/03/2013, 22h27

@johnrock

Merci pour ta réponse.

en fait, tu arrives exactement au même résultat que moi, c'est à dire que si tu diminues ton opacité, tu diminues ainsi l'intensité de la couleur de ton texte.

Hors j'aimerais justement la conserver

Bonne soirée

**Muchos** · 12/03/2013, 23h24

Utiliser RGBA plutôt qu'OPACITY ? Ex:

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 
<!doctype html>
<html lang="fr-FR">
<head>
	<meta charset="UTF-8" />
	<title>Gérer opacité avec rgba</title>
	<style type="text/css">
p {color: green; background: rgba(100, 100, 100, 1);}
p+p {background: rgba(100, 100, 100, 0.6);}
        </style>
</head>
<body>
	<p>On voit rien !</p>
	<p>On voit mieux :)</p>	
</body>
</html>

**Une.Personne** · 13/03/2013, 00h10

Merci & résolu

Ecriture opaque sur fond transparent

CSS

Discussions similaires

Partager

Partager