CSS Opacity and Rgba Property
Full Stack Web Development Courses with Real-time projects Start Now!!
Program 1
<html><head><title>Demo Color</title>
<style>
img
{
float:left;
margin: 10px;
}
body
{
background-color: antiquewhite;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
#container1
{
width:700px;
height:300px;
padding:20px;
border: 3px double black;
background-color:blueviolet;
opacity: 0.7;
}
#container2
{
width:700px;
height:300px;
padding:20px;
border: 3px double black;
background-color:blueviolet;
background: rgba(188,0,0,0.7)
}
</style>
</head>
<body>
<div id="container1">
<img src="dog.jpg" width="200px">
<h1> Test Opacity Application</h1>
<h2>
Have you ever thought what would our lives be like in a world without Artificial Intelligence?
Or
</h2>
</div>
<div id="container2">
<img src="dog.jpg" width="200px">
<h1> Test Opacity Application</h1>
<h2>
Have you ever thought what would our lives be like in a world without Artificial Intelligence?
Or
</h2>
</div>
</body>
</html>
If you are Happy with DataFlair, do not forget to make us happy with your positive feedback on Google
