I am applying opacity to lighten my background-color due to this my text is not visible. Any way to increase the visibility ?
.abc{
width:200px;
height:200px;
border:1px solid red;
background: #211E1C;
opacity: 0.03;
color:green
}
here is my code
https://jsbin.com/tihowuveda/2/edit?html,css,js,output
In above example ansn text is not visible why ?
Opacity is applied to the whole element so anything in it will have that opacity. You can use rgba to set the opacity of the background color.
.abc, .foo{
display: inline-block;
width:200px;
height:200px;
border:1px solid red;
background: #211E1C;
color:green
}
.abc {
opacity: 0.03;
}
.foo {
background-color: rgba(33, 30, 28, 0.03);
}<div class="abc">Hello World</div>
<div class="foo">Hello World</div>It is working as intended. Very low opacity means that it is barely visible or almost invisible.
Try setting 0.3 or something.
Reference: https://developer.mozilla.org/en-US/docs/Web/CSS/opacity
opacity: 0.03 is almost opacity: 0. that's why your text is hidden.
Please make the background value with rgba
.abc{
width:200px;
height:200px;
border:1px solid red;
background: rgba(33, 30, 28, 0.03);
color:green
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="abc">
ansn
</div>
</body>
</html>when you apply opacity to anything you are applying it to all the children element as well if you want to apply opacity to only background then try using alpha i.e. rgba colors have a look https://www.w3schools.com/css/css_image_transparency.asp