There are multiple ways in which you can change the opacity of the background of your HTML element using CSS. Let us take a look at a few of them.
Example 1: Make the Background Color Opaque using alpha values
Hex color
The last 2 digits after the first 6 digits of a hex color code in CSS are for opacity called as Alpha value.
No Opacity
Opacity: ee
Opacity: dd
Opacity: cc
Opacity: bb
Opacity: aa
Opacity: 99
Opacity: 88
Opacity: 77
Opacity: 66
Opacity: 55
Opacity: 44
Opacity: 33
Opacity: 22
Opacity: 11
<div style="width:300px;height:20px;background:#222222;color:#fff">No Opacity</div>
<div style="width:300px;height:20px;background:#222222ee;color:#fff">Opacity: ee</div>
<div style="width:300px;height:20px;background:#222222dd;color:#fff">Opacity: dd</div>
<div style="width:300px;height:20px;background:#222222cc;color:#fff">Opacity: cc</div>
<div style="width:300px;height:20px;background:#222222bb;color:#fff">Opacity: bb</div>
<div style="width:300px;height:20px;background:#222222aa;color:#fff">Opacity: aa</div>
<div style="width:300px;height:20px;background:#22222299;color:#fff">Opacity: 99</div>
<div style="width:300px;height:20px;background:#22222288;color:#fff">Opacity: 88</div>
<div style="width:300px;height:20px;background:#22222277;color:#fff">Opacity: 77</div>
<div style="width:300px;height:20px;background:#22222266;color:#fff">Opacity: 66</div>
<div style="width:300px;height:20px;background:#22222255;color:#222">Opacity: 55</div>
<div style="width:300px;height:20px;background:#22222244;color:#222">Opacity: 44</div>
<div style="width:300px;height:20px;background:#22222233;color:#222">Opacity: 33</div>
<div style="width:300px;height:20px;background:#22222222;color:#222">Opacity: 22</div>
<div style="width:300px;height:20px;background:#22222211;color:#222">Opacity: 11</div>
RGBA color
Set from a range of 0.1 (10%) to 1.0 (100%)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
rgba(255,0,0,0.1)
<div style="width:300px;height:20px;background:rgba(255,0,0,0.1);color:#222">rgba(255,0,0,0.10)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.2);color:#222">rgba(255,0,0,0.20)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.3);color:#222">rgba(255,0,0,0.30)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.4);color:#222">rgba(255,0,0,0.40)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.5);color:#222">rgba(255,0,0,0.50)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.6);color:#222">rgba(255,0,0,0.60)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.7);color:#222">rgba(255,0,0,0.70)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.8);color:#222">rgba(255,0,0,0.80)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,0.9);color:#222">rgba(255,0,0,0.90)</div>
<div style="width:300px;height:20px;background:rgba(255,0,0,1);color:#222">rgba(255,0,0,0.1)</div>
Example 2: Using CSS Background Image
Make use of the opacity property to set the background as opaque when using a background image in CSS.
<div
style="background :url(/c2c-tmp-imgs/dog-profile-image.jpg);
width:300px;height:300px;
padding:10px;
opacity:50%"></div>
Facing issues? Have Questions? Post them here! I am happy to answer!
Author Info:
Rakesh (He/Him) has over 14+ years of experience in Web and Application development. He is the author of insightful How-To articles for Code2care.
Follow him on: X
You can also reach out to him via e-mail: rakesh@code2care.org
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:- How to install Classic Notepad App on Windows 11 - Windows-11
- Linux Remove or Delete Files and Directories using Terminal Commands - Linux
- How to Sort a List in Java by Date - Java
- How to Install Windows Subsystem for Linux (WSL) on Windows 11 (22H2) - Windows-11
- Steps of working with Stored Procedures using JDBCTemplate Spring Boot - Java
- SharePoint PowerShell PnP - How to get list item by Item ID using GetItemById, Get-PnPListItem - SharePoint
- Android Studio : Implement abstract methods shortcut - Android-Studio
- Change Sublime Text 3 white background color theme - Sublime-Text