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,
- CSS: Apply opacity only for div background and not text
- 32 css cursors web developers must know
- How to place two div elements next to each other
- reCAPTCHA Implementation Tutorial
- align image at middle of div element
- Add scroll to div element in HTML Css
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to make jsfiddle bootstrap ready
- How to Center Align Image in Bootstrap
- Horizontally Center Align tag in HTML using CSS
- How to make div or text in html unselectable using CSS
More Posts:- Android : Error in http connection java.net.SocketException: Permission denied - Android
- How to create Toast messages in Android - Android
- How to Search Something (string) in Android Studio Project like Eclipse - Android-Studio
- How to detect Browser and Operating System Name and Version using JavaScript - JavaScript
- Free Unlimited Calls from MTNL & BSNL Landlines from 1st May 2015 - HowTos
- Adding internet permission to Android Project - Android
- How to turn off Facebook autoplay videos on timeline - Facebook
- Android : How to make TextView Scrollable - Android
- Sharepoint Server 2016 installation Prerequisites with download links - SharePoint
- How to get current URL Location using Javascript HTML - JavaScript
- Android Toast position top - Android
- How to submit website to dmoz directory - HowTos
- SharePoint Server 2016 setup error - A system restart from a previous installation or update is pending. Restart your computer and run setup to continue. - SharePoint
- Java XML-RPC 3.1.x based web service example - Java
- Plug-in com.android.ide.eclipse.adt was unable to lead class Error - Android