Create a Cross Browser Semi-transparent Background with CSS

To achieve this effect we’ll use the CSS function, rgba(), and provide a fallback for older browsers.

The rgb() function defines colours using the red-green-blue (RGB) model. The rgba() function defines colours using the red-green-blue (RGB) model plus alpha.

Key: r(red) g(green) b(blue) a(alpha)

.my-div{
	background:rgb(0,0,0); /* fallback for older browsers */
	background: rgba(0,0,0,0.5);
}

In this example we’re setting a black background with 0.5 opacity, with opacity being on a scale of 0 (completely transparent) to 1 (not transparent at all). 0.5, as used in this example, is 50% see through. The rgb fallback sets the background as black without transparency – for those really old browsers.