CSS - Apply Opacity to Element but NOT To Text Within The Element

Question

I have created a menu block element which I have applied an opacity of 0.4/40 to.

The problem I have is that the opacity affects the text within the menu block and I am looking to have the opacity ONLY applied to the menu block, but not the text.

Hopefully I have just missed something silly. Here is my code:

#menuLeft{
    background-color: #33AAEE;
    float: left;
    width: 20%;
    clear: both;
    opacity:0.4;
    filter: alpha(opacity = 40);
}

I am looking for a way to keep the text colour the same/set the opacity to exclude the text.

Thank you.

Daniel O'Hara · Accepted Answer · 2011-08-24 12:05:40Z

21

This is a very, very, very popular problem. Try using rgba():

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+
background-color: rgba(51, 170, 238, 0.6);
//Your opacity is the first pair here (in HEX!) for IE6+
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1;
float: left;
width: 20%;
clear: both;
/*opacity:0.4;
filter: alpha(opacity = 40);*/

You also can use http://css3please.com/ to easily convert from HEX to RGB and back.

edited Aug 24, 2011 at 12:05

answered Aug 24, 2011 at 12:00

Daniel O'Hara

13.5k3 gold badges48 silver badges70 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mus Over a year ago

Or a very UNpopular problem(!) Thank you so much for your help, it has solved my issue!

sasdev · Accepted Answer · 2012-12-29 22:12:33Z

0

You could also put a transparent picture as the background. The text should display normally. http://css-tricks.com/snippets/css/transparent-background-images/

answered Dec 29, 2012 at 22:12

sasdev

5067 silver badges23 bronze badges

Collectives™ on Stack Overflow

CSS - Apply Opacity to Element but NOT To Text Within The Element

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related