Change CSS Background Opacity with Examples

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!