[Résolu] Transparence de balise div

Bonjour,
J'essaie de donner un niveau de rouge au fond d'une de mes balise div..
Exemple banal: j'essaie de reproduire [b]un rectangle (couleur de fond rouge) d'environ 350(largeur) et 450 (hauteur) semi-transparent mais avec un contenu (2 petits rectangles de 220* 100 chacun) qui eux sont bien visibles:

<div class="menu_en4" align="center"> 
       <div class="men_1er" >
        <a class="segmentLinks" href="http://home.mcafee.com?CID=MFEfr-frMHP001">
          <span>Pour les jeunes</span>
          <p>vie et momens inoubliables</p> </a> </div>
		  
        <div class="men">
        <a class="segmentLinks" href="/fr/business-home.aspx?CID=MFEfr-frMHP002">
          <span>Pour les grands parents</span>
         <p>determination et abnegations..</p></a> </div>
        
		<div class="men">
        <a class="segmentLinks" href="/fr/small-HP003">
          <span>Pour les petites filles</span>
          <p>joie et gaïté..</p></a> </div>
		  
        <div class="men_der">
        <a class="segmentLinks" href="/fr/parents.aspx?CID=MFEfr-frMHP004">
          <span>Pour les Parents</span>
          <p>Bonjour ..</p></a> </div>
          
         </div><!----menu en 4--->
         </div> <!----------div des menu------->  

mon code css

 .menu_en4{ position:relative;  margin-left:50%; padding:10px;  margin-right:10%; background-color:#0033FF ;width:240px; height:450px; background-color: rgba(100,0,0,.4); /*filter : alpha(opacity=50); opacity : 0.5; */}

.men_1er{ position:relative; width:220px; height:100px; margin-top:10px; background-color:#FF99CC; margin-bottom:10px}
.men{ position:relative; width:220px; height:100px; background-color:#FFFFFF; margin-bottom:10px}
.men_der{ position:relative; width:220px; height:100px;   background-color:#FF99CC;}

Problème j'arrive pas a faire ressortir le rouge de la div (rectangle transparent) qui englobe les 4 autres petits.
En fait j'essaie d'avoir un fond transparent mais qui ne perd pas complètement sa couleur et qui en même temps fait apparaître son contenu à l'exemple de cette page de McAfee: http://www.mcafee.com/fr/....
Juste pour info j'essaie pas de copier mais avoir un fond rouge transparent rouge comme ça pour moi serait l’idéal.. Mon problème c'est la dose concernant les paramètres:

 background-color: rgba(x,x,x,.4); 

...
Merci d'avance.[/b]
Modifié par rniango (14 Feb 2014 - 12:51)

Si jamais, ce n'est pas en CSS qu'ils sont parvenus à ce résultat, chez McAfee :
http://www.mcafee.com/img/segmentation/3.jpg
Ils doivent avoir superposé au minimum deux backgrounds dans photoshop et joué sur le produit ou la densité.

En y réfléchissant, il me parait étrange que tu veuilles jouer sur l'opacité du div qui contient les autres div... Si tu t'inspires de l'image donnée, c'est plus volontiers tes div enfants qui devraient être translucides, et ton div parent, tout à fait opaque. Non?
La photographie de l'homme est nette, la texture rouge sur lui, translucide.
C'est donc ce qui vient par dessus l'image de fond (dans ton cas, les 4 petits carrés), qui doit se voir affecter une transparence.

A moins que je n'aie pas précisément compris ton problème...?

Sinon, si tu souhaites garder un rouge assez vif en jouant sur l'opacité ou le rgba, tu dois prendre un bordeaux comme couleur de base (+ opacity), j'imagine.
A coup d'opacité sur un rouge 'commun', tu obtiendras plus volontiers des couleurs pastels comme dans l'exemple en haut de cette page.

Dans ton cas, la superposition de backgrounds pourrait aussi peut-être fonctionner, si tu veux aller plus loin (background-image)
Modifié par Reka (14 Feb 2014 - 22:44)

salut,
merci pour ta disponibilité et tu as parfaitement raison, en fait c'est une image qui a été utilisé chez McAfee. Mais je comprends maintenant mieux : quasi-impossible d'avoir une telle couleur avec css (enfin pour moi).
Et bien pour les mêmes problèmes lisez, en espérant que cela vous aidera:
http://www.zonecss.fr/style_css/feuille_css_opacity.html
http://www.alsacreations.com/tuto/lire/909-CSS-transparence-couleur-rgba.html
http://www.css3.info/preview/rgba/
http://www.xul.fr/css/opacity.php
Merci.

Merci infiniment