CSS3 Opacity - background only

Question

I wanted to change the opacity of my navigations background color but it also changed the opacity of the links of my navigation. How do I change the opacity of my navigations background color only?

This is my style for my navigaton:

#navigation { 
    height: 60px;
    width: auto;
    margin: 0 0 20px 0;
    background-color: black;
    border-radius: 8px;
    opacity: 0.7;
}

#navigation ul {
    list-style-type: none;
}

#navigation li {
    padding-left: 22px;
    float: left;
}

#navigation a {
    text-decoration: none;
    display: inline-block;
    float: left;
    padding: 10px 20px 10px 20px;
    color: white;
    margin-top: 10px;
    opacity: 1;
}

#navigation a:hover {
    background-color: orange;
    border-radius: 10px;
}

score 14 · Answer 1 · answered Nov 17 '13 at 21:00

14

You can do it like this:

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

this changes the background color of black opacity to 0.7 without effecting anything else

answered Nov 17 '13 at 21:00

CᴴᵁᴮᴮʸNᴵᴺᴶᴬ

4,062
2
22
36

1

Be aware that IE <= Version 8 doesn't support rgba! If you need to support these versions as well consider using a transparent background-image or try to put the navigationtext and the element which holds the background as siblings. – mineichen Nov 17 '13 at 21:36

score 2 · Answer 2 · answered Nov 17 '13 at 21:01

2

By using this color:

background-color: rgba (0, 0, 0, .5); // black

This way, it will be 50% of the real color!

It filters alpha object and provides you with the part of the real color with some transparency effect.

answered Nov 17 '13 at 21:01

Afzaal Ahmad Zeeshan

15,669
12
55
103

1

Thank you! How do I change the opacity of your background image only? – user2997822 Nov 17 '13 at 21:11
Why don't you add the transparency in your graphic programm? :) – mineichen Nov 17 '13 at 21:37
@MarkusI. Perhaps the opacity needs to be programmatic? – Christopher Roy Jul 15 '14 at 16:34

CSS3 Opacity - background only

2 Answers2