Search code examples
cssopacity

how to have an opacity:1 text in an opacity:0.5 div

I have a div in which there is an a tag. I gave opacity:0.5 to the div then the text inside opacity is also 0.5 I don't want to use background image, then how can I have a text with opacity:1 inside my div with opacity:0.5 ??

Solution

  • Set the background color of the parent using rgba (includes alpha transparency). Example:

    .Container {
    background-color:rgb(0,0,0); /* fallback for IE 8 and below */
    background-color:rgba(0,0,0,0.5);
}
.Text {
    color:rgb(255,255,255);
}

    This sets the opacity of the background of the container when using colors, however it does not set the opacity of the children. If you need to do that, set the opacity of the children to whatever you'd like with another class: 

    .OtherChildItem {
    opacity:0.5;
    filter:alpha(opacity=50); /* IE 8 and below */
}

    If you want to use a background-image, just set the opacity on the image itself (use a PNG).