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,
- Elegant CSS Box Shadows Ideas
- How to Vertically Center Align Text in a Div using CSS Code Example
- How to Center Align Image in Bootstrap
- Change CSS Background Opacity with Examples
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Simple CSS Grid Example
- CSS: Apply opacity only for div background and not text
- How to create a circular Image using pure CSS Code
- How to place two div elements next to each other
- Responsive Web Design with CSS Media Queries: A Beginner's Tutorial [Updated for 2023]
- Add scroll to div element in HTML Css
- How to make div or text in html unselectable using CSS
- reCAPTCHA Implementation Tutorial
- Set Falling Show on Website for Christmas using Pure CSS Code
- How to set CSS background-Image Property
- List of 32 CSS cursors web developers must know about
- 10 Must Know CSS Border Styles with Examples
- How to make jsfiddle bootstrap ready
- Horizontally Center Align
- Tailwind CSS Hello World Example
- align image at middle of div element
- Only Chessboard using HTML and CSS Code Example
More Posts:
- Python: Traverse List Backwards - Python
- How to Restart Mac using Terminal Command - MacOS
- 5 Ways to Loop a Dictionary in Python - Python
- Java: Convert Stream to List - Java
- Change the background of Tkinter label or text - Python
- How to get file path in Idea IntelliJ IDE - Java
- Jupyter Notebook add Table Of Contents (TOC) - Python
- List of PowerShell Cmdlet Commands for Mac - Powershell
