Pb avec le tuto La transparence de couleur avec RGBa en CSS3 [Résolu]

Bonjour tous,
Je cherche à appliquer à un div contenant du texte une transparance de la couleur de fond de ce div.

Je me base donc surle tutoriel d'aslacréation.
J'ai donc côté css

#fond_milieu {width:840px;  background-color: rgba(0,0,0,0.75)!important; background-color: rgb(0,0,0);padding-left:32px; padding-right:32px; padding-bottom:20px; margin-top:8px; padding-top:38px; margin-left:37px; z-index:300; position:absolute; text-align:justify; }

Côté HTML, dans le head

<!--[if IE lte IE 8]>
  <style type="text/css">
    #fond_milieu {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0000000,endColorstr=#C0000000);
      zoom: 1;
    } 
  </style>
<![endif]-->

puis dans le body

<div id="fond_milieu">
<h1>Titre de la page </h1>

Modifié par la ptiote (12 Dec 2011 - 13:33)

Bonjour,

tu devrais essayer comme ça :

#fond_milieu {
width:840px;
background-color: black;
background-color: rgba(0,0,0,0.75); 
padding:38px 32px 20px;
etc....
}

Est-ce que ça fonctionne mieux ?

Sinon, je suppose qu'il y a un intérêt à nous avoir montré ton commentaire conditionnel, ou à avoir appliqué un !important sur ton background-color ? Si oui, il faudrait être plus précis sur le problème que tu rencontres.
Modifié par Ten (07 Dec 2011 - 16:55)

Bonjour, rien n'allait hier.
Je recommence donc aujourd'hui.

Donc hier le message était en effet incomplet
Je recommence
Côté CSS

#fond_milieu {width:840px; background-color: rgb(0,0,0); background-color: rgba(0,0,0,0.75)!important; ;padding-left:32px; padding-right:32px; padding-bottom:20px; margin-top:8px; padding-top:38px; margin-left:37px; z-index:300; position:absolute; text-align:justify; }

Head de la page PHP

<!--[if IE lte IE 8]>
  <style type="text/css">
    #fond_milieu {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0000000,endColorstr=#C0000000);
      zoom: 1;
    } 
  </style>
<![endif]-->

<div id="fond_milieu">
<h1>Titre de la page </h1>
<P> texte de la page</p>
</div>

Ce qui donne sous IEtester
Visible en haut de page, texte blanc : <!--[if IE lte IE 8]> <![endif]-->
ca pose pb

Ie6 le div est completement transparent > donc texte illisible
IE 8, 7 TRansparence ok
IE 10, 9 Il existe une transparence mais elle est moindre

Si je supprime du head

<!--[if IE lte IE 8]>
  <style type="text/css">
    #fond_milieu {
      background:transparent;
      filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#C0000000,endColorstr=#C0000000);
      zoom: 1;
    } 
  </style>
<![endif]-->

Plus de <!--[if IE lte IE 8]> <![endif]--> en haut de page --> normal !!
IE 6,7,8, div opaque
IE 9 et 10 transparence normal.

Comment faire ?
1/ faire disparaitre <!--[if IE lte IE 8]> <![endif]--> en haut de page
2/ Avoir la même transparence/opacité sur mon div avec les différentes versions IE (75%)

Merci de votre aide

Bah dites donc !!!!
J'ai connu ce forum plus actif.

Personne ne peut me répondre ?

salut,

je cherche moi aussi à faire appliquer le tuto sur mon propre code... malgré la simplicité du code pour l'instant c'est pas gagné, mais je mets ça sur la fatigue, je pense que j'y verrai plus clair demain matin.

En attendant, voici un début de réponse : il y a une erreur dans le tuto, ce n'est pas

<!--[if IE lte IE 8]>

mais plutôt

<!--[if lte IE 8]>

Je reviendrai quand j'aurai un peu plus avancé...
++

Je voudrai pas etre desagreable,

Mais tu n'as pas fermé ta DIV!

<div id="fond_milieu">

<h1>Titre de la page </h1>

</div>

C'est peut-être ca!