why my text is not visible when applying opacity to element?

Question

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 ?

Because the opacity is 0.03! Do you realize that it is the opacity of the whole element? — epascarello, Oct 27 '20 at 19:05
Leave the opacity at 1 so that the contents remain visible, and only brighten your background: `background: rgba(33, 30, 28, 0.03);` — blex, Oct 27 '20 at 19:07

score 1 · Accepted Answer · answered Oct 27 '20 at 19:09

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>

score 0 · Answer 2 · answered Oct 27 '20 at 19:05

0

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

answered Oct 27 '20 at 19:05

IvanD

2,728
14
26

wangdev87 · Answer 3 · 2020-10-27T19:11:14.713

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>

score 0 · Answer 4 · answered Oct 27 '20 at 19:08

0

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

answered Oct 27 '20 at 19:08

Vibhav

321
1
8

why my text is not visible when applying opacity to element?

4 Answers4