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