Opacité CSS va au-dessus des autres calques

J'ai une question...j'ai mon en-tête de la classe comme ceci

.header{
    background-color:#626262;
    width:250px;
    height:745px;
    opacity:0.4;
    filter:alpha(opacity=40); /* For IE8 and earlier */
}

à l'intérieur de cette classe, j'ai ces 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);
}

Et ces couches sont décolorées à l'opacité de 0,4....ma question est comment puis-je obtenir les personnes de plus de couches de ne pas être fanée avec l'opacité de 0,4? J'espère que cela a un sens...un exemple de ceci serait à http://www.yourthirdeye.ca/

Nous sommes donc ici à 2015, et il me semble que nous sommes toujours confrontés avec le fait d'avoir beaucoup moins que des solutions idéales pour cette question générale? J'aimerais avoir un dégradé lisse sur un carrelage, de la texture, pour créer une sorte d'éclairage affecter, sans avoir recours à de grands (ou mis à l'échelle) de l'image, et puis de les mettre complètement opaque, de taille variable et réactif, le contenu est plus que. Devrais-je poser une nouvelle question?

OriginalL'auteur user979331 | 2012-07-10