CSS3 Opacity - background only
css, html
Solution
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
Problem
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; } ```