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,
- How to make jsfiddle bootstrap ready
- Horizontally Center Align tag in HTML using CSS
- reCAPTCHA Implementation Tutorial
- How to Center Align Image in Bootstrap
- Add scroll to div element in HTML Css
- List of 32 CSS cursors web developers must know about
- align image at middle of div element
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- How to place two div elements next to each other
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
- How to set CSS background-Image Property
More Posts:- incorrect line ending: found carriage return (\r) without corresponding newline (\n) - Android
- Upload Pdf file using PHP Script - PHP
- Fix zsh: permission denied: script.sh - zsh
- 3 Commands to stop Nginx Server - Linux
- Steps to Compare Two files in Sublime Text Side-by-Side - Sublime-Text
- Android : IOException: Unable to open sync connection! - Android
- Send Email using SharePoint PowerShell command, SMTP server - SharePoint
- How to install pip on macOS using terminal command [Python] - Python
