Add transparency to the background with CSS

CSSWeb DevelopmentFront End Technology

<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>
raja
Updated on 01-Jul-2020 10:49:44

Advertisements