CODEWITHSUNDEEP
htmlcss
austin
austin

Reputation: 845

Opacity value in css

Im trying to make the background of a bar have the opacity of 50% and the foreground text to not have any opacity at all here is my code

html:

<div id="footer">
      <p>FOOTER TEXT</p>
</div>

css:

#footer {opacity: 0.5;} #footer p {opacity: 1;}

Im not understanding why this is not work can anyone help?

Upvotes: 0

Views: 1392

Answers (3)

Quentin
Quentin

Reputation: 943143

If the background is an image, then you have to use a translucent image.

If the background is a solid colour, then you can use an rgba() value. This works in the same way as rgb() with an additional value for the opacity level, but has limited browser support as it is a new feature in the CSS 3 drafts.

background-color: rgba(0, 0, 255, 0.5);

You can combine rgba() with a background image for backwards compatibility.

background: url(blue_0.5_pixel.png);
background: rgba(0%, 0%, 100%, 0.5);

Upvotes: 2

MatTheCat
MatTheCat

Reputation: 18721

What you try won't work, 100% of 50% equals 50% !

If your background only must be transparent you can use a PNG-24 image or rgba value with background-color property.

Upvotes: 2

Chandu
Chandu

Reputation: 82893

I think you are checking in IE browser. What you have defined will work in non-ie browsers. To make it work in IE, chnge the style to:

#footer {opacity: 0.5;filter: alpha(opacity=50);}
#footer p {opacity: 1;filter: alpha(opacity=100);}

Upvotes: 0

Related Questions