In this post i am going to tell you how to give the opacity to the div background not for the text. If you give opacity:0.1 something like this it takes whole div include text in the particular div, so you can't able to view text clearly. so you should give the opacity to the background only means you should use the code like this background-color: rgba(255,0,0,0.1);
This is one of the simple css trick really helps to you. The below image shows the result of the above code. 255,0,0 is the color code of red and opacity is 0.1. see the image it applies only the background not for the div text.
This is one of the simple css trick really helps to you. The below image shows the result of the above code. 255,0,0 is the color code of red and opacity is 0.1. see the image it applies only the background not for the div text.
The code for background opacity:
<html>
<head>
<title>Background color with opacity not text</title>
<style>
.div1 {
padding:20px;
font-size: 50px;
text-align: center;
margin: 10px auto;
background-color: rgba(255,0,0,0.1);
}
</style>
</head>
<body>
<div class='div1'>sanwebcorner.com</div>
<br/>
<p style="margin-top:150px;"> </p>
<p><a href="http://www.sanwebcorner.com"><h1>www.sanwebcorner.com</h1></a></p>
</body>
</html>
<head>
<title>Background color with opacity not text</title>
<style>
.div1 {
padding:20px;
font-size: 50px;
text-align: center;
margin: 10px auto;
background-color: rgba(255,0,0,0.1);
}
</style>
</head>
<body>
<div class='div1'>sanwebcorner.com</div>
<br/>
<p style="margin-top:150px;"> </p>
<p><a href="http://www.sanwebcorner.com"><h1>www.sanwebcorner.com</h1></a></p>
</body>
</html>
0 Comments