1

I notice my text color is fading together with the opacity of the transparent box. But i don't really know what is the proper code to separate my text from the opacity. Sorry if this question sounds abit stupid.

body {
  background-color: gray;
}

.container {
  position: relative;
  text-align: center;
}

.content {
  position: absolute;
  top: 20%;
  left: 0;
  right: 0;
  background-color: white;
  opacity: 0.3;
  width: 70%;
  margin: auto;
  padding: 5px;
  color: black;
  font-size: 30px;
  font-family: calibri;
  text-align: center;
}
<body>
  <div class="container">
    <div class="content">
      <h3>Welcome to MedCare</h3>
    </div>
  </div>
</body>
isherwood
  • 58,414
  • 16
  • 114
  • 157
Kinja
  • 449
  • 5
  • 22
  • 1
    Sounds like a misuse of opacity, then. Why not just use the proper background color? – isherwood Sep 27 '21 at 18:30
  • What is the output you are expecting? – Danielprabhakaran N Sep 27 '21 at 18:31
  • One thing you need to know about opacity, it is rendered last. This means it will cover the entire parent element on top of everything. There is no way to cancel it for specific elements. You should look into `rgba` colors instead. – tacoshy Sep 27 '21 at 18:31
  • i think @tacoshy kinda answered for me, i just wanted my text color to not be affected by the background color – Kinja Sep 27 '21 at 18:33
  • 2
    get rid of the opacity and change the `background-color` from `white` to: `rgba(255, 255, 255, 0.3)` – tacoshy Sep 27 '21 at 18:34
  • @tacoshy thanks so much! and apologies to all of you for this redundant question – Kinja Sep 27 '21 at 18:39

0 Answers0