28220 sujets

CSS et mise en forme, CSS3

Transparence css3 dans des divs imbriquées

Bonsoir,

Voici mon code pour le moment :
<style>
* { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
body {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-image: url(http://members.microsoft.com/partner/france/licences/info/2005-05-04-64bits/windows.gif);
}

.fond {
	/* effet de transparence : merci Alsacreation */
	background:#000000;
	filter:alpha(opacity=40);
	-moz-opacity:.40;
	opacity:.40;
	color: #FFFFFF;
	height: 50px; /* tiens c'est marrant : il faut préciser un height sinon IE ne prend pas la transparence ! */
	font-size: 50px;
}
.texte {
	color: #FF0000;
	border: thin solid #FF0000;
	font-size: 50px;
}
</style>
<div class="texte">
    <div class="fond">Linux on a dit !</div>
</div>


Ça passe bien, c'est fluide, c'est compatible avec IE. L'intérêt de cette imbrication ? Je cherche à ne pas faire hériter la transparence du fond aux éléments textes et borders. Pour le border ça va. Mais pour le texte je sèche car bien entendu je peux pas pour le moment le passer de la div "fond" vers la div "texte".

Auriez-vous des pistes pour rendre l'issue intéressante ?
Merci de votre aide Smiley confused
Modifié par globy (24 Nov 2005 - 23:22)
Bonjour,

Je remonte ce post qui n'a pas trouvé réponse car je cherche également une solution pour stopper l'héritage de la transparence...

Nicolas.
Bonjour Nicolas,

Très rapidement, et très approximativement, quelque-chose comme cela, peut-être ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!-- 
* { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(http://members.microsoft.com/partner/france/licences/info/2005-05-04-64bits/windows.gif);
}

.fond {
/* effet de transparence : merci Alsacreation */
background:#000000;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
width: 100%;
font-size: 50px;
position: absolute;
}
.texte {
color: #fff;
border: thin solid #FF0000;
font-size: 50px;
position: absolute;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="fond">&nbsp;</div>
<div class="texte">Linux on a dit !</div>
</body>
</html>
Ok merci, j'ai mis la main entre temps sur une solution équivalente :
http://developer.mozilla.org/en/docs/Useful_CSS_tips:Color_and_Background
S'appliquant dans mon cas à un menu, je n'ai plus qu'a rendre opaque le fond au passage de la souris sur le texte Smiley ohwell , je pense que le javascript va être obligatoire pour y parvenir.

Mon menu est de la forme
<ul id="menu">
		<li><a href="javascript:void(0);">LE SMV</a><div class="transparence"></div></li>
  		<li><a href="javascript:void(0);">LES MISSIONS</a><div class="transparence"></div></li>
	  <li><a href="javascript:void(0);">LA MARNE</a><div class="transparence"></div></li>
	</ul>
Est-ce accessible ?
Nicolas.
[quote=absoluteweb]je n'ai plus qu'a rendre opaque le fond au passage de la souris sur le texte Smiley ohwell , je pense que le javascript va être obligatoire pour y parvenir.

Pas forcément : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<style type="text/css">
<!-- 
* { margin: 0; padding: 0; border: 0; font-family: sans-serif; font-size: 1em; font-weight: normal; font-style: normal; text-decoration: none; }
body {
background-repeat: no-repeat;
background-attachment: fixed;
background-image: url(http://members.microsoft.com/partner/france/licences/info/2005-05-04-64bits/windows.gif);
}

.fond {
/* effet de transparence : merci Alsacreation */
background:#000000;
filter:alpha(opacity=40);
-moz-opacity:.40;
opacity:.40;
width: 100%;
font-size: 50px;
}
.texte {
color: #fff;
border: thin solid #FF0000;
font-size: 50px;
position: absolute;
width: 100%;
}
a.texte:hover+.fond {
filter:alpha(opacity=100);
-moz-opacity:1;
opacity:1;
}

-->
</style>
</head>
<body>
<a href="#"  class="texte">Linux on a dit !</a>
<div class="fond">&nbsp;</div>
</body>
</html>

à partir d'IE7 ou avec les scripts de Dean Edwards
Modifié par chmel (14 Dec 2005 - 13:40)
Salut
Intéressant. Je teste l'idée de Mozilla de suite. Ça risque de déboucher sur une résolution de mon problème.
Merci de ce super lien et vos aides.
Modifié par globy (14 Dec 2005 - 17:34)
Sujet clos
Aller à