How do I make a semi transparent background?

Good to know

Some web browsers have difficulty to render text with shadows on top of transparent background. Then you can use a semi transparent 1x1 PNG image as a background.

Note

Remember that IE6 don’t support PNG files.

Use rgba():

.transparent {
  background-color: rgba(255,255,255,0.5);
}

This will give you 50% opacity while the content of the box will continue to have 100% opacity.

If you use opacity:0.5, the content will be faded as well as the background. Hence do not use it.

This works, but all the children of the element with this class will also become transparent, without any way of preventing that.

.css-class-name {
    opacity:0.8;
}

If you want to make transparent background is gray, pls try:

   .transparent{
       background:rgba(1,1,1,0.5);
   }