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 Media Query Tutorial for Responsive Mobile First Web Design
- Horizontally Center Align tag in HTML using CSS
- How to make div or text in html unselectable using CSS
- Add scroll to div element in HTML Css
- 32 css cursors web developers must know
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to Center Align Image in Bootstrap
- How to make jsfiddle bootstrap ready
- align image at middle of div element
- CSS: Apply opacity only for div background and not text
More Posts:- How to know if someone has read your WhatsApp message - WhatsApp
- Android Studio NoClassDefFoundError: java.awt.Toolkit - Android-Studio
- WhatsApp launches WhatsApp Web to Access Messages over web browser - WhatsApp
- What is Android Toast.LENGTH_SHORT and Toast. LENGTH_LONG durations - Android
- Check Wifi Connection static Android Programming - Android
- Android Constant and Resource Type Mismatches Lint - Android
- How to Word wrap eclipse console logs width - Eclipse
- How to hide Navigation bar from Android Screen Activity - Android
- Share image and text Twitter using your Android Application Programatically - Twitter
- WhatsApp Web escanner - WhatsApp
- Programmatically check if Facebook is installed on Android device - Android
- Install Apache Tomcat ver 8 on Mac OS X Yosemite 10.10 - Mac-OS-X
- Disable Control Scroll Zoom-in and Zoom-out in Notepad++ - NotepadPlusPlus
- Can we move apps like WhatsApp, Facebook to external MicroSD card - WhatsApp
- Java: Check Internet connection on Android Device (Wifi or Mobile) - Android