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;
}
To set the opacity of a background, image, text, or other element, you can use the CSS opacity property. Values for this property range from 0 to 1. If you set the property to 0, the styled element will be completely transparent (ie. invisible).
The percentage of opacity is calculated as Opacity% = Opacity * 100 To set the opacity only to the background and not the text inside it. It can be set by using the RGBA color values instead of the opacity property because using the opacity property can make the text inside it fully transparent element.
Use rgba value for the backgroundColor . This sets it to a grey color with 80% opacity, which is derived from the opacity decimal, 0.8 . This value can be anything from 0.0 to 1.0 .
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With