0

In the code given below, I have applied opacity to the box in the center, which contains some text. Now my problem is I don't want the text to be opaque. So how do I nullify text opacity without putting it in a different <div>?

.r2{
    height:20%;
    width: 40%;
    background-color: #f3fafe;
    position: fixed;
    margin: 0 auto;
    top:40%;
    left:30%;
    opacity: 0.7;
    border-top-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 5px 5px 5px rgba(110,110,110,0.7);
    transition: transform 1s;   
}

This is the style I have given to the box.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Rathin Shah
  • 11
  • 1

1 Answers1

2

If I understand you correctly you want to fade the box but not the text. This is achived by changing the background-color to a RGBA value. In you case that would be rgba(243, 250, 254, 0.7). Also, don't forget to change the opacity to 1.0.

Your current code would become this:

.r2{
    ...
    background-color: rgba(243, 250, 254, 0.7);
    ...
    opacity: 1.0;
    ...
}
Scraph
  • 175
  • 6
  • But presumably he also wants the opacity to affect the borders and shadows as well. –  Jul 12 '15 at 06:05
  • @torazaburo The only way I can think of then is to use RGBA color on them as wall. He already did it for the shadow. – Scraph Jul 12 '15 at 06:09