0

The best way I can see this working is by using position:absolute and z-axis to move text on top of opacity:0.5 box. Is there a better way to accomplish this?

<div style="opacity:0.5;height:50px;width:150px;">
  <p> I want this to be non transparent </p>
</div>
CalmlyCoding
  • 47
  • 5
  • 1
    Depends on what you actually want to accomplish … if the div just has a solid background color, then you should use `rgba`. For a background image, you might consider using a PNG that has the opacity “built-in” as alpha transparency already. – CBroe Oct 22 '15 at 21:29

1 Answers1

1

use a background color with alpha, so that the children don't inherit the opacity:

<div style="background-color: rgba(255, 255, 255, 0.5);height:50px;width:150px;">
  <p> I want this to be non transparent </p>
</div>

Using rgba, alpha is defined by a range from 0-1. In this example 0.5 is used to show 50% opacity. You can adjust the opacity on this scale.

shredMER
  • 227
  • 2
  • 16
taxicala
  • 21,408
  • 7
  • 37
  • 66