remplir un div avec un autre div

Question

Je fais un site Web, qui est constitué d'un tas de panneaux. Ces panneaux ont tous une texture qui se répète, mais pour rendre le site plus beau, j'ai décidé de teinter les images en utilisant des divs colorés et de l'opacité. Je préfère ne pas utiliser plus de photos, alors s'il vous plaît ne suggère pas que je viens de recolorer l'image. Mon problème est que quand je mets le texte dans le div de la teinte, la police hérite de l'opacité, et finit grise au lieu de blanc, mais quand je la mets en dehors de la teinte div, je perds la teinte.

.tint { 
 
    display: block; 
 
    position: static; 
 
    height: 100%; 
 
    width: 100%; 
 
    line-height: 100%; 
 
    opacity: 0.4; 
 
    z-index: -1; 
 
    filter: alpha(opacity=40); 
 
    /* For IE8 and earlier */ 
 
} 
 
.ExpDiv { 
 
    -moz-border-radius: 7px; 
 
    -webkit-border-radius: 7px; 
 
    -khtml-border-radius: 7px; 
 
    -webkit-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); 
 
    -moz-box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); 
 
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.6); 
 
    border: solid 3px; 
 
    -webkit-transition: all .5s ease-in-out 0.2s; 
 
    -moz-transition: all .5s ease-in-out 0.2s; 
 
    -ms-transition: all .5s ease-in-out 0.2s; 
 
    -o-transition: all .5s ease-in-out 0.2s; 
 
    transition: all .5s ease-in-out 0.2s; 
 
    background-color: #99ccff; 
 
    min-width: 7px; 
 
    min-height: 9px; 
 
    max-width: 150px; 
 
    max-height: 200px; 
 
    overflow: hidden; 
 
    background-image: url(striped_linenen.png); 
 
    background-repeat: repeat; 
 
    float: left; 
 
}

<div class="ExpDiv" style="float:left;"> 
 
    <div class="tint" style="background: #99CCFF; "> 
 
    Content For these Divs will be inserted by the Owner... 
 
    </div> 
 
</div> 
 
<div class="divider"> 
 
    <br /> 
 
</div> 
 
<div class="ExpDiv" style="float:left;"> 
 
    <div class="tint" style="background: #996699; "></div> 
 
    Content For these Divs will be inserted by the Owner... 
 
</div>

Answer 1

Comme l'opacité affectent tout le bloc, vous pouvez utiliser deux differents div. Un pour la teinte, un autre pour le contenu. Placez les deux d'entre eux dans la position absolute:

HTML

<div class="ExpDiv" style="float:left;"> 
    <div class="tint" style="background: #ff0000; "></div> 
    <div class="content">Content For these Divs will be inserted by the Owner...</div> 
</div> 

CSS

.tint { 
    position:absolute; 
    height:100%; 
    width:100%; 
    opacity:0.4; 
    z-index:1; 
    filter:alpha(opacity=40); 
} 
.content { 
    position:absolute; 
    height:100%; 
    width:100%; 
    z-index: 99; 
} 
.ExpDiv {  
    position: relative; 
    width: 150px; 
    height: 200px; 
} 

=> Simplified and updated jsFiddle

Answer 2

Opacité affecte tout l'élément. Vous pouvez utiliser RGBA pour vos arrière-plans:

background: rgba(153, 204, 255, 0.4); /* #99CCFF */ 
background: rgba(153, 103, 153, 0.4); /* #996699 */ 

Answer 3

J'ai eu affaire à ce genre de questions assez longtemps, surtout parce que parfois j'aimais utiliser div semi opaque milieux, mais ne voulait pas que le texte soit en partie transparent, je pense que les problèmes que nous avions sont similaires. Par expérience, je vais vous dire juste pour générer des png de 10x10 pixels avec la transparence que vous voulez et les utiliser comme arrière-plans de ces div. Va vous résoudre beaucoup de maux de tête. Le seul problème que vous pourriez avoir avec ceci est que IE6 et ci-dessous ne supportent pas png je pense, mais il y avait une bibliothèque js pour résoudre ce problème.

La plupart des aproaches piratant les positions et les choses pourraient finir par ne pas fonctionner cross-browser et rendre la modification de votre code assez méchant.