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.
<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%)
<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!
- 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
- Microsoft Teams Error - You cannot add another work account to Teams at the moment - Teams
- How to make jsfiddle bootstrap ready - CSS
- Eclipse like Auto Import Shortcut in Intelij IDE Android Studio - Android-Studio
- What is the Max and Minimum Value of int type in Python? - Python
- [Fix] Ubuntu E: Unable to locate package sudo error - Ubuntu
- Duplicate id @+id/textView1, already defined earlier in this layout Android Error - Android
- Java XML-RPC 3.1.x based web service example - Java
- Align left align text in Bootstrap - Bootstrap