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>
-
Have Questions? Post them here!
More Posts related to CSS,
- How to make jsfiddle bootstrap ready
- How to place two div elements next to each other
- List of 32 CSS cursors web developers must know about
- How to create a circular Image using pure CSS Code
- How to set CSS background-Image Property
- Tutorial : Simple Lightweight Pure CSS based Vertical Navigation Menu
- Only Chessboard using HTML and CSS Code Example
- Set Falling Show on Website for Christmas using Pure CSS Code
- Horizontally Center Align
- How to Center Align Image in Bootstrap
- align image at middle of div element
- CSS Media Query Tutorial for Responsive Mobile First Web Design
- reCAPTCHA Implementation Tutorial
- Add scroll to div element in HTML Css
- CSS: Apply opacity only for div background and not text
- How to make div or text in html unselectable using CSS
More Posts:
- How to uninstall/remove or disable Microsoft Teams - Teams
- Best way to calculate elapsed time in Java using Java 8 Duration & Instant Class with Nanoseconds precision - Java
- View in File Explorer option missing in SharePoint Online Edge browser - SharePoint
- Install Java 17 (LTS) JDK on ARM based M1/M2 Mac Natively - MacOS
- The package must have at least one . separator [Android Studio] - Android-Studio
- Resolve System.IO.PathTooLongException [Sharepoint C# .Net] - SharePoint
- [Fix] Instant java.time.temporal.UnsupportedTemporalTypeException: Unsupported unit: Years - Java
- How to Insert an Inverted Question Mark on Mac ¿ - MacOS