CSS: Apply opacity only for div background and not text

In order to make only the background color opaque but not the text within the div, we need to use RGBA color scheme instead on RGB or Hex Color code.

rgba stands for "Red Greed Blue and Alpha". Alpha is for opacity. So in order to set only the background-color opaque we need to set the alpha lower then 1.

⚡️ background:rgba(80,80,80,0.5);

and not something like,

⚡️ background:#999999;opacity :0.5;

<title>Set Opacity Example</title>
	<div style="background:rgba(80,80,80,0.1);padding:100px">
	This text has a background that is made opaque making sure text is not.

jsfiddle: https://jsfiddle.net/ud5wgxy8/

Example with background opaque but not affecting text
Example with background opaque but not affecting text
Try Out Code2care Dev Tools:


Code2care is an initiative to publish and share varied knowledge in programming and technical areas gathered during day-to-day learnings and development activities.

Students and software developers can leverage this portal to find solutions to their various queries without re-inventing the wheel by referring to our easy to understand posts. Technical posts might include learnings, tutorials, trouble-shooting steps, video tutorials, code snippets, how-to, blogs, articles, etc.

🎉 We are celebrating the 10th years of Code2care! Thank you for all your support!

We strongly support Gender Equality & Diversity.