5

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

Payam Shakibafar
  • 1,115
  • 3
  • 12
  • 25
  • 1
    A duplicate of several questions, for example: http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text?rq=1 – kapa Jan 29 '13 at 15:37

6 Answers6

12

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

PlantTheIdea
  • 16,061
  • 5
  • 35
  • 40
  • But that's not the same as setting the opacity : it changes just the background color, not the opacity of other included elements or of the background image. – Denys Séguret Jan 29 '13 at 15:37
  • he specifically said he did not want to use background image, nor that he wanted to affect the opacity of the child items. If he wanted to do that, he just sets the opacity for the children. – PlantTheIdea Jan 29 '13 at 15:38
3

You can't. The real child opacity can't be greater than its parent's opacity in the HTML rendering model.

From the documentation (emphasis mine) :

Opacity can be thought of as a postprocessing operation. Conceptually, after the element (including its descendants) is rendered into an RGBA offscreen image, the opacity setting specifies how to blend the offscreen rendering into the current composite rendering.

You must put your child div outside the parent div. This is usually achieved using a different kind of positioning than the static one.

Denys Séguret
  • 372,613
  • 87
  • 782
  • 758
  • Hum. Can I know why this was downvoted ? Is this because someone doesn't get the difference between the alpha of a color and the opacity of a div ? – Denys Séguret Jan 29 '13 at 15:52
2

Use a totally different <div> for the text.

<div id="parentDiv">
    <div id="mainDiv">
    </div>
    <div id="childDiv">
       Hello
    </div>
</div>

CSS

#parentDiv
{
    position:relative;

}
#childDiv
{
    position:absolute;
    top:45px;
    left:45px;
    opacity:1;
}
#mainDiv
{
    width:100px;
    height:100px;
    opacity:0.5;
}

Check it out : http://jsfiddle.net/AliBassam/aH9HC/ I added background colors so you can notice the result.

Since I'm forcing you to use absolute, I don't want you to have a problem with positioning the text, so make some mathematical calculations to get the best position:

top = ( Height of Div Opacity(0.5) - Height of Div Opacity(1) ) / 2
left = ( Width of Div Opacity(0.5) - Width of Div Opacity(1) ) / 2
Ali Bassam
  • 9,691
  • 23
  • 67
  • 117
0

The a tag takes opacity from parent div. You can use the rgba CSS property on div rgba(0, 0, 0, 0.5) and again on a tag rgba(255, 0, 0, 1.0).

premik91
  • 89
  • 1
  • 1
  • 7
0

Like the answer above states, you'd need a separate div for the text, absolutely positioned to fit over the opaque div. You might want to set the z-index to something high as well.

lockedown
  • 594
  • 6
  • 15
0

Warning: this solution will work only if you want outer element to be completely transparent.

Instead of opacity: 0 and opacity: 1 use visibility: hidden and visibility: visible

Worked in my case (may not work in yours but it's worth the shot) :)

N3R4ZZuRR0
  • 2,400
  • 4
  • 18
  • 32
Mike S-t
  • 1