How to make an element transparent so that the background shows through | Using CSS

To make elements transparent we need use the Opacity property and give it value less than 1, why less than 1 because one is the default value and the elements will appear as they are without any transparency, giving the elements a value less than 1 will make it transparent.

opacity using CSS
without opacity


HTMl Code
<body>
<img src="My Image.jpg" alt="My Image" id="firstimage"/>
<img src="My Image.jpg" alt="My Image" id="secondimage" />
</body>

CSS Code
<style>
body{ background-image:url(bg.jpg);}
body img{ width:350px; height:250px; padding-left:5%; padding-top:18%;}
#secondimage{ opacity:0.5;}
</style>


opacity using CSS
with opacity



Comments

Popular posts from this blog

How CSS3 Works