Add transparency to the background with CSS

---

<p>Use the <em>opacity&nbsp;</em>property to add transparency to the background of an element. You can try to run the following code to work.</p><h2>Example</h2><p><a class="demo" href="http://tpcg.io/90nthc" rel="nofollow noopener noreferrer" target="_blank">Live Demo</a></p><pre class="prettyprint notranslate">&lt;!DOCTYPE html&gt; &lt;html&gt; &nbsp; &nbsp;&lt;head&gt; &nbsp; &nbsp; &nbsp; &lt;style&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background-color: #808000; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; padding: 20px; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div.one { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.2; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: alpha(opacity=20); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;div.two { &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; opacity: 0.5; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; filter: alpha(opacity=50); &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;} &nbsp; &nbsp; &nbsp; &lt;/style&gt; &nbsp; &nbsp;&lt;/head&gt; &nbsp; &nbsp;&lt;body&gt; &nbsp; &nbsp; &nbsp; &lt;h1&gt;Heading&lt;/h1&gt; &nbsp; &nbsp; &nbsp; &lt;p&gt;Check transparency in the below section:&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;one&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;opacity 0.2&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;div class = &quot;two&quot;&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;opacity 0.5&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp; &nbsp; &lt;div&gt; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&lt;p&gt;opacity 1&lt;/p&gt; &nbsp; &nbsp; &nbsp; &lt;/div&gt; &nbsp; &nbsp;&lt;/body&gt; &lt;/html&gt;</pre>

• Related Questions & Answers
• With CSS add transparency to a button
• Add a background color to the form input with CSS
• CSS Opacity / Transparency
• Adjusting Text background transparency in Matplotlib
• CSS Transparency Using RGBA
• Repeat the background image with CSS
• Set the Background Attachment with CSS
• Specify the background image with CSS
• Animated background with CSS
• Set the Background Image Position with CSS
• Specify position of the background images with CSS
• Show the background image only once with CSS
• Specify the size of the background images with CSS
• Set the opacity for the background color with CSS
• How to declare the painting area of the background with CSS