CODEWITHSUNDEEP
htmlcssopacity
user1269625
user1269625

Reputation: 3209

CSS - opacity background, eveything inside had opacity also

I have this site here:

http://artendijen.com/susan_dev/

and I have a navigation box with an opacity and everything inside the navigation box has a opacity also, how do I fix this? I am using Chrome on Windows 7 if that makes any difference.

.navigation{
    float:left;
    height:550px;
    width:300px;
    background:#000;
    margin-left:-6px;
    margin-top:100px;
    opacity:0.6;
    filter:alpha(opacity=60);
    border-radius: 0 10px 10px 0;
    box-shadow: 5px 0px 3px rgba(0,0,0,.5);
}

.navigation ul{
    list-style:none;
    padding-top:20px;
}

.navigation ul li{
    padding-bottom:20px;
}

.navigation ul li a{
    font-size:18px;
    text-decoration:none;
    color:#FFF;
    text-transform:uppercase;
    font-family:'Conv_Museo300-Regular';
}


.logo{
    text-align:center;
    padding-top:10px;
}

Upvotes: 0

Views: 95

Answers (3)

DaniP
DaniP

Reputation: 38252

You can't fix it , is what opacity does to the element and all his content.

If you want maybe just apply opacity to the background-color then you can use rgba () values.

background-color: rgba (0,0,0,0.4);

There the first three values are the color 0,0,0 in this black and the fourth value 0.4 is the alpha channel = transparency level.

If you can use it you can check the compatibility here

http://caniuse.com/css3-colors

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115174

Opacity applies to the element and all its children.

Use a background color with an RGBA value.

  background: rgba(0,0,0,0.6);

Upvotes: 2

Daniel A. White
Daniel A. White

Reputation: 190952

Remove the opacity rule from .navigation and add the alpha sub-property value to background-color.

Upvotes: 0

Related Questions