Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS opacity goes over other layers

Tags:

css

opacity

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/

like image 370
user979331 Avatar asked Jul 10 '12 21:07

user979331


People also ask

Can you not inherit an opacity?

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

What is the difference between opacity and transparency in CSS?

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.

How do you override opacity in a child element?

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.

Is CSS opacity values are always?

Opacity values are always floating values, minimum value is 0, and maximum value is 1. We prefer opacity value till one place.


1 Answers

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/

like image 80
Spectre87 Avatar answered Sep 21 '22 00:09

Spectre87