How to change opacity or transparency of Background Color in CSS without affecting text, images or other web properties

There are instances when you think that would be great idea if you can able to change opacity of background color of div without affecting text, image & other web properties present inside same div of HTML & CSS.

 
Yes, that is possible… Here is the Answer:

 
What you normally do is specify background color in CSS using hex i.e. Hexadecimal values like this:

 

.navbar {background-color: #ffffff;}

 
But if you use rgba to specify background color in CSS you can utilise it’s feature called Alpha i.e. RGBA is short form for Red – Green – Blue – Alpha

 

Here is what W3Schools explains RGBA Color is:

 
RGBA color values are supported in IE9+, Firefox 3+, Chrome, Safari, and in Opera 10+.

 
RGBA color values are an extension of RGB color values with an alpha channel – which specifies the opacity of the object.

 
An RGBA color value is specified with: rgba(red, green, blue, alpha). The alpha parameter is a number between 0.0 (fully transparent) and 1.0 (fully opaque).

 
So now you can tweak your code with RGBA css code with fallback to RGB to something like this:

 

.navbar {
	background-color: rgb(255,255,255); /* RGBA Fallback to RGB to support old browsers */
	background-color: rgba(255,255,255,0.5); /* Background color white with 50% opacity */
}

 

Tip: Above code with transparency & opacity will delight user with good user experience which allow user to see through what is behind navbar while scrolling & navigating.

 
Yes, now using this technique you can also change text color also by using following code:

 

.h1 {
	background-color: rgb(0,0,0); /* RGBA Fallback to RGB to support old browsers */
	background-color: rgba(0,0,0,0.5); /* H1 HTML Heading tag with black color with 50% opacity */
}

 

Tip: Above code will be look nice if HTML Heading Tag happens to be on Image or on different color background.

 
Hope it helps,

 
Thanks & Regards
Mandar Apte