I have a question...I have my header class like this
.header{
background-color:#626262;
width:250px;
height:745px;
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
inside this class I have these classes...
.logo{
background-color:#626262;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
color:#FFF;
font-size:28px;
padding-top:125px;
margin-left:20px;
}
.navigation{
background-color:#626262;
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
color:#FFF;
margin-left:20px;
text-align:left;
margin-bottom: 125px;
}
.navigation ul{
list-style:none;
padding-left:0;
padding-top:35px;
}
.navigation ul li{
padding-bottom:20px;
font-size:24px;
}
.navigation li a{
color:#FFF;
text-decoration:none;
}
.social{
width:100%;
font-size:18px;
height: 50px;
line-height: 72px;
padding-right: 10px;
}
.social ul {
list-style-type: none;
margin: 0;
padding: 0 0 0 8px;
}
.social li {
float: left;
}
.social ul .facebook a {
color: #FFFFFF;
display: block;
text-decoration: none;
background-image: url(http://jamessuske.com/karl/images/facebook.png);
background-position: center right;
background-repeat: no-repeat;
padding-right:65px;
}
.social ul .facebook a:hover {
background-image: url(http://jamessuske.com/karl/images/facebook_hover.png);
}
.social ul .twitter a {
color: #FFFFFF;
display: block;
text-decoration: none;
background-image: url(http://jamessuske.com/karl/images/twitter.png);
background-position: center right;
background-repeat: no-repeat;
padding-right:70px;
}
.social ul .twitter a:hover {
background-image: url(http://jamessuske.com/karl/images/twitter_hover.png);
}
.social ul .pinterest a {
color: #FFFFFF;
display: block;
text-decoration: none;
background-image: url(http://jamessuske.com/karl/images/pinterest.png);
background-position: center right;
background-repeat: no-repeat;
padding-right:70px;
}
.social ul .pinterest a:hover {
background-image: url(http://jamessuske.com/karl/images/pinterest_hover.png);
}
And those layers are faded to the opacity of 0.4....my question is how do I get those over layers not to be faded with opacity of 0.4? I hope this makes sense...an example of this would be at http://www.yourthirdeye.ca/
Opacity is not inherited, but because the parent has opacity that applies to everything within it. You cannot make a child element less transparent than the parent, without some trickery. Values are a number from 0 to 1 representing the opacity of the channel (the “alpha” channel).
Opacity is a measure of how opaque an item is and transparency is a measure of how transparent it appears. Both work nearly the same way but at 100% transparent, the element will be completely invisible, while with the opacity set to 100% it be fully visible.
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.
Opacity values are always floating values, minimum value is 0, and maximum value is 1. We prefer opacity value till one place.
If it's just for a partially transparent background, you can use rgba()
, like this:
.header{
background-color: #626262;
background-color: rgba(98, 98, 98, 0.4);
width:250px;
height:745px;
}
This won't work in older browsers (e.g. IE8 and earlier), so that's why the background-color
is set twice - the first is a fallback.
There are also some css tricks that you can use - but they have drawbacks. If the above solution works for you, I'd go with that.
If not, these links should get you started:
http://css-tricks.com/non-transparent-elements-inside-transparent-elements/
http://www.impressivewebs.com/css-opacity-that-doesnt-affect-child-elements/
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