Menu
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.
562
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
One approach you can use is to put the background-image styles in a pseudo-element of the parent element. Since the pseudo-element is a sort of child of the parent, you can change the opacity of it without affecting the text content.
You can add a container's sibling absolutely positioned behind container, with the same size, and apply opacity to it. And use no background on your container. Now container's children have no opaque parent and the problem vanishes.
Basically, you can't override the opacity of a child. The answer you might be looking for will depend on what it is you are actually trying to do. Paulie is right, opacity effects the entire element (including children) and can't be reversed by a child element.
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
