Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 Opacity - background only [duplicate]

Tags:

html

css

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;
}
like image 337
user2997822 Avatar asked Nov 17 '13 20:11

user2997822


People also ask

How do I set background color opacity in CSS?

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).

How do I make a background transparent in CSS but not text?

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.

How do you give opacity to the background color in react native?

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 .


1 Answers

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

like image 189
CᴴᵁᴮᴮʸNᴵᴺᴶᴬ Avatar answered Oct 26 '22 13:10

CᴴᵁᴮᴮʸNᴵᴺᴶᴬ