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;
<html>
<head>
<title>Set Opacity Example</title>
</head>
<body>
<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.
</div>
</body>
</html>jsfiddle: https://jsfiddle.net/ud5wgxy8/
Example with background opaque but not affecting text
More Posts related to CSS,
- Add scroll to div element in HTML Css
- Tutorial: CSS Media Query for Responsive Web Design
- Horizontally Center Align tag in HTML using CSS
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to make div or text in html unselectable using CSS
- How to make jsfiddle bootstrap ready
- CSS: Apply opacity only for div background and not text
- 32 css cursors web developers must know
- align image at middle of div element
- reCAPTCHA Implementation Tutorial
- How to place two div elements next to each other
- How to Center Align Image in Bootstrap
More Posts:- Facebook Thanks for stopping by! We hope to see you again soon. - Facebook
- Android EditText Cursor Colour appears to be white - Android
- Disable EditText Cursor Android - Android
- Connection Failed: 1130 PHP MySQL Error - MySQL
- SharePoint Managed Metadata Hidden Taxonomy List - TaxonomyHiddenList - SharePoint
- Execute .bin and .run file Ubuntu Linux - Linux
- Possible outages message Google Webmaster tool - Google
- Android : Remove ListView Separator/divider programmatically or using xml property - Android
- Unable to edit file in Notepad++ - NotepadPlusPlus
- SharePoint PowerShell Merge-SPLogFile filter by time using StartTime EndTime - SharePoint
- SQLite Error: unknown command or invalid arguments: open. Enter .help for help - Android
- JBoss stuck loading JBAS015899: AS 7.1.1.Final Brontes starting - Java
- Android Wifi WPA2/WPA Connects and Disconnects issue - Android
- Android Toolbar example with appcompat_v7 21 - Android
- ERROR x86 emulation currently requires hardware acceleration. Intel HAXM is not installed on this machine - Android