To apply transparency effect opacity property is used in css.The value of
opacity starts from 0.0 which is for complete opacity effect and end with
1.0 which means complete opaque.By default value for opacity is 1.0, and
this can be applied on both foreground and background.
Opacity example with image
<style type="text/css">
.img1{
opacity: 0.1;
width: 200;
}
.img2{
opacity: 0.5;
width: 200;
}
.img3{
opacity: 1.0;
width: 200;
}
</style>
<img class="img1" src="gallery1.jpg"
alt="html-images" />
<img class="img2" src="gallery2.jpg"
alt="html-images" />
<img class="img3" src="gallery3.jpg"
alt="html-images" />
Output of above code
Opacity value is: 0.1
Opacity value is: 0.5
Opacity value is: 1.0
Opacity example with box
<style type="text/css">
.box1{
opacity: 0.1;
width: 200;
background: orange;
height: 200px;
}
.box2{
opacity: 0.5;
width: 200;
background: orange;
height: 200px;
}
.box3{
opacity: 1.0;
width: 200;
background: orange;
height: 200px;
}
</style>
<div class="box1"> This is box 1 </div>
<div class="box2"> This is box 2 </div>
<div class="box3"> This is box 3 </div>
Output of above code
This is box1
Opacity value is: 0.1
This is box2
Opacity value is: 0.5
This is box3
Opacity value is: 1.0
The Best
Comment here
If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.
