Manque de transparence

**moimp** · 29/08/2018, 19h03

Bonsoir,
Oui c'est un jeu de mot mais c'est aussi ma réalité.
Avec les codes suivants, le dernier paramètre rgba (transparence) n'est pas pris en compte.
J'ai testé avec IE11, Chrome et FF. Les consoles de débogage des trois navigateurs affichent la validité de tout le css mais le fond reste opaque.
Si j'enlève les marques de commentaire de la dernière ligne CSS, la couleur de fond est bien prise en compte.
J'ai le CSS suivant:

Code css :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
body, table
 {
	background-color: rgb(32, 64, 128);
	color: white;
	font-family: Arial;
}
.existingTitle {
	display:inline-block;
	width:9rem;
	padding:2px 5px;
	font-size:0.8rem;
	text-decoration:underline;
	background-color: rgba(32, 64, 128, 0.5);
	/*background-color:blue;*/
}

avec ce html (simplifié):

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Genealium - Votre généalogie en ligne</title>
	<meta name="keywords" content="généalogie, logiciel, progiciel, famille, base de données" />
	<meta name="description" content="Base de données de généalogie en ligne. Vous entrez les données de votre famille et celle-ci peut y accéder en ligne." />
 
	<meta http-equiv="Pragma" content="no-cache" />
	<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" /> <!-- Ajout de no-store et must-revalidate -->
	<meta http-equiv="Expires" content="-1" />
 
	<base href="http://genealium.proginet.local/" />
 
	<link rel="stylesheet" media="all" type="text/css" href="css/structure.css" /> <!-- Dimensions et positions -->
	<link rel="stylesheet" media="screen" type="text/css" href="css/style0.css" /> <!-- Apparence -->
	<!-- <link rel="stylesheet" media="print" type="text/css" href="css/print.css" /> --> <!-- Documents imprimés -->
	<link rel="stylesheet" type="text/css" href="css/default_blue.css" /> <!-- Calendrier -->
</head>
 
<body>
 
	<header>
		<div id="headerCalendar">
			<span id="calendarSpan"></span> <!-- Cette ligne sert à l'affichage de l'horloge -->
		</div>
 
		<h1>Généalium<br /></h1>
 
	</header>
 
	<section id="main">
		<div id="left">
			<nav>
 
<h3>Votre généalogie</h3> <!-- Consultation -->
<a href="parentPage.php?childPageKey=0" title="Accueil propre à votre famille">Accueil famille</a><br/><hr/> <!-- Accueil -->
<a href="parentPage.php?childPageKey=2" title="Retour à la dernière personne affichée">Affichage individuel</a><br/><hr/> <!-- Page principale -->
 
<h3>Autres</h3>
<a href="logout.php" title="Déconnexion">Déconnexion</a><hr/> <!-- Déconnexion : Eface les cookies de connexion avant de revenir à l'index -->
<a href="index.php" title="Accueil Genealium">Accueil Généalium</a><hr/> <!-- Accueil Genealium -->
<a href="./aide/fr/aide000.php" target="_blank" title="Sommaire de l'aide">Aide</a><hr/>
 
			</nav>
		</div>
		<article id="right">
 
 
<h2>Demande de mise à jour d'une personne</h2>
 
 
<p class="note">- Pour bien remplir ce formulaire, vous avez intérêt à ouvrir l'affichage individuel dans un nouvel onglet ou une nouvelle fenêtre pour contrôler les clefs.<br />
	- Le renseignement des champs en gras et en couleur est obligatoire.</p>
 
<form method="post" action="" class="L" enctype="multipart/form-data">
	<fieldset><legend>Personne à créer ou modifier</legend>
		<p class="note">Important*: Toutes les dates et les lieux doivent être celles de l'état civil. C'est important pour effectuer des recherches ultérieures.</p>
		<label for="id">Clef</label>
			<input type="text" name="id" id="id" value="1" readonly /><br/>
 
				<p><label></label><span class="existingTitle" style="text-align:right">Valeurs actuelles</span><span class="existingTitle">Corrections</span></p>
 
		<label class="mustField">Sexe</label>
			<span class='existingData'>Masculin</span><!--
			--><input type="radio" name="gender" id="F" value="F"  required /><label for="F">Féminin</label><br/>
		<label></label>
			<span class='existingData'>&nbsp;</span><input type="radio" name="gender" id="M" value="M"  /><label for="M">Masculin</label><br/>
 
		<label for="last_name" class="mustField">Nom&nbsp;<sup>(1)</sup></label>
			<span class='existingData'>Démo</span>			<input type="text" name="last_name" id="last_name" value="" required placeholder="?" /><br/>
	</fieldset>
 
		<p><input type="submit" name="send" value="Envoi" /></p>
 
</form>
 
<script>
        var fromPHPtoJS = {"shortDays":["D","L","Ma","Me","J","V","S"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"]};
</script>
<script src="libraries/jsSimpleDatePickr.2.1.js"></script>
<script src="updateQuery.js"></script>
<script src="libraries/common.js"></script>
 
 
		</article>
	</section>
 
	<footer class="footer">
		<br/>&nbsp;
		<hr/>
		* N° de semaine selon ISO 8601	</footer>
 
	<script>
                var clockData   = {"weekDays":["Lundi","Mardi","Mercredi","Jeudi","Vendredi","Samedi","Dimanche"],"shortDays":["D","L","Ma","Me","J","V","S"],"monthes":["Janvier","F\u00e9vrier","Mars","Avril","Mai","Juin","Juillet","Ao\u00fbt","Septembre","Octobre","Novembre","D\u00e9cembre"],"week":"Semaine","language":"fr"};
        </script>
	<script src="libraries/clock.js"></script>
	<script src="libraries/common.js"></script>
	</body>
 
</html>

**psychadelic** · 29/08/2018, 19h43

Si, la transparence marche très bien.

Code css :

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
  <style>
    body, table
    {
      background-color: grey; /* rgb(32, 64, 128); si tu met un fond de la même couleur et sans transparence, elle plombe celle de l'élément  de classe .existingTitle*/
      color: white;
      font-family: Arial;
    }
    .existingTitle {
      display:inline-block;
      width:9rem;
      padding:2px 5px;
      font-size:0.8rem;
      text-decoration:underline;
      background-color: rgba(32, 64, 128, 0.5);
      /*background-color:blue;*/
    }
  </style>