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,
- Horizontally Center Align tag in HTML using CSS
- align image at middle of div element
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- How to make div or text in html unselectable using CSS
- How to Center Align Image in Bootstrap
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- How to make jsfiddle bootstrap ready
- reCAPTCHA Implementation Tutorial
- How to place two div elements next to each other
- CSS: Apply opacity only for div background and not text
More Posts:- SharePoint Designer Workflow error - Coercion Failed: Input cannot be null for this coercion - SharePoint
- 5 Programming Languages to Learn in the Year 2021 - News
- What is HTTP 500 Internal Server Error Code on web browsers - HowTos
- Right Align Text in Bootstrap framework - Bootstrap
- Notepad++ Save Failed - Please check if this file is opened in another program. - NotepadPlusPlus
- Copy Text to Android Clipboard Programmatically ClipboardManager - Android
- MO229507 UK Europe users cannot access Microsoft 365 - SharePoint, OneDrive, Teams, Admin center, Planner, Yammer - Microsoft
- How to fix java.net.NoRouteToHostException in Android Studio - Android-Studio
- Check Wifi Connection static Android Programming - Android
- Struts2 : java.lang.ClassNotFoundException: org.apache.commons.fileupload.RequestContext - Java
- How to check uptime of Linux/Unix/macOS system/server using console command? - Linux
- How to Kill a port using bash terminal command? - Bash
- Locate Notepad++ unsaved files backup location - NotepadPlusPlus
- List of jars required for Struts2 project - Java
- JSON Schema and Hyper-Schema : JSON Tutorial - Json-Tutorial
- Get cURL command from Chrome Inspect Network HTTP URL - cURL
- java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity. - Android
- How to create Custom RatingBar Android Programming Tutorial - Android