CSS: Opacité problème

Question

Ok, donc dans ma page je montre une image de fond avec ce css:

.heroarea { 
    background:url(/static/images/mrd_hero_01.jpg) no-repeat; 
    height:450px; 
} 

et la copie placée au-dessus et le contenant la copie est-ce que ces styles:

.main-panel { 
    position: absolute; 
    top: 130px; 
    left: 380px; 
    background: #fff; 
    width: 560px; 
    height: 340px; 
    padding: 30px 30px 20px 30px; 
    /* CSS3 standard */ 
    opacity:0.5; 
    /* for IE */ 
    filter:alpha(opacity=50); 
} 
.main-panel h1 { 
    background: transparent; 
    color:#39372f; 
    text-align: center; 
    /* CSS3 standard */ 
    opacity:1; 
    /* for IE */ 
    filter:alpha(opacity=100); 
} 

Généralement, tout est comme prévu. Autrement dit, l'image montre où je l'attends. Le panneau principal montre un fond blanc avec un fond transparent. Cependant, le texte de la balise h1 est également transparent. Je peux voir l'image d'en dessous montrant à travers. Comment puis-je faire cela pour que le contenu de la balise h1 ne soit pas opaque?

Merci!

Answer 1

L'opacité s'applique à l'élément, pas à son arrière-plan.

Vous devez utiliser une image translucide ou une couleur de fond rgba. Il existe un . (Divulgation: Mon site)

Answer 2

Vous devez le déplacer en dehors de son parent .main-panel. Il n'y a aucun moyen de remplacer l'opacité de 50% appliquée ici. Alternativement, si vous n'utilisez que 50% d'opacité pour rendre l'image de fond mrd_hero_01.jpg transparente, vous pouvez le convertir en .png avec 50% d'opacité et vous n'aurez pas besoin de régler l'opacité sur .main-panel.

Answer 3

Utilisez rgba et/ou png transparent. Vous pouvez également déplacer le contenu à un frère séparé div comme l'arrière-plan:

<div id="parent"> 
    <div id="opacity"></div> 
    <div id="child">text</div> 
</div> 

Answer 4

Si vous utilisez la transparence sur un élément de bloc, il fait l'élément enfant à l'intérieur transparent well.This comment fonctionne css! Je ne pense pas qu'il y ait moyen de s'en sortir. Ce que vous pouvez faire pour positionner h1 sans en faire un enfant ou utiliser une image translucide

Answer 5

Il semblerait que votre texte soit un enfant de .main-panel. Cela prendra 50% d'opacité. Même si vous déclarez que le texte est une opacité, 100% ne fera que 100% de 50%. Vous devrez le superposer en dehors de .main-panel et le placer en haut.