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 create a circular Image using pure CSS Code
- Horizontally Center Align tag in HTML using CSS
- Add scroll to div element in HTML Css
- Change CSS Background Opacity with Examples
- How to make text bold using CSS
- How to place two div elements next to each other
- Vertically Center Text in a DIV Element
- align image at middle of div element
- Tailwind CSS Hello World Example
- How to make div or text in html unselectable using CSS
- Only Chessboard using HTML and CSS Code Example
- Simple CSS Grid Example
- How to set CSS background-Image Property
- CSS Background Opacity with Examples
- reCAPTCHA Implementation Tutorial
- List of 32 CSS cursors web developers must know about
- How to Vertically Center Align Text in a Div using CSS Code Example
- 10 Must Know CSS Border Styles with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- CSS: Apply opacity only for div background and not text
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to make jsfiddle bootstrap ready
- Elegant CSS Box Shadows Ideas
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- How to Center Align Image in Bootstrap
More Posts:- 11 Weeks of Android Online Sessions-15-Jun-to-28-Aug-2020 - Android
- [Fix] java: incompatible types: java.lang.String cannot be converted to int - Java
- How to clear Cache, Cookies and History on iPhone Safari - iOS
- Fix: SpringFramework BeanDefinitionValidationException: Could not find an init method named - Java
- Split String in Python with Multiple Delimiters - Python
- How to Uninstall Microsoft Teams on Mac - Teams
- Java SE JDBC Select Statement Example - Java
- PHP Fatal error : Call to a member function bind_param() on a non-object - PHP