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

css, opacity

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).

Problem

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` ??

Original source

Related problems