How to make background opacity using CSS?

Questions › Category: css › How to make background opacity using CSS?

dogWhispers88 asked 7 years ago

Im trying to write a simple html page and I want a div to have a black background but kinda translucent.
here is my code:
HTML:
<div class=”transparent-bg”></div>

CSS:
.transparent-bg{
background-color:#000000;
opacity:0.4;
}

my code will make all the contents inside the div transparent as well.

1 Answers

1 Vote Up Vote Down

Best Answer

karl answered 7 years ago

Try to use the rgba value.
example:
.transparent-bg{
background-color:rgba(0,0,0,0.3);
}

opacity will be inherited by the DIV’s children that is why all elements inside the div will be affected as well.