0

So i have a div and in that div i have a button and a text box. The div i have set with opacity of 0.5. Okay perfect, however i do not want all of the content in the div to be transparent. How can i make the textbox and button full brightness?

.bodybox {
    position:absolute;
    background-color: white;
    top: 160px;     
    width: 960px;
    height: 450px;
    z-index: 13;
    margin-left: 24.736842105263158%;
    margin-right: 24.736842105263158%;
    opacity: 0.1;}

This is what i have so far so you can see what i mean.

https://i.stack.imgur.com/ygLRj.jpg

seenukarthi
  • 8,241
  • 10
  • 47
  • 68
L3SAN
  • 61
  • 1
  • 8

2 Answers2

1

You can use the :after attribute if you have an image

.bodybox {
   position: relative;
}

.bodybox:after {
    content : "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    background-image: url(/wp-content/uploads/2010/11/tandem.jpg); 
    width: 100%;
    height: 100%;
    opacity : 0.2;
    z-index: -1;
}

Or,if you only have a background-color, you can use rgba:

.bodybox {
    position:absolute;
    background-color: rgba(255,255,255, 0.1)
    top: 160px;     
    width: 960px;
    height: 450px;
    z-index: 13;
    margin-left: 24.736842105263158%;
    margin-right: 24.736842105263158%;
    }
Hristo Georgiev
  • 2,499
  • 1
  • 16
  • 23
1

In such cases rgba helped me. Substitute background value.

bodybox {
position:absolute;
background: rgba(255, 255, 255, 0.5);
top: 160px;     
width: 960px;
height: 450px;
z-index: 13;
margin-left: 24.736842105263158%;
margin-right: 24.736842105263158%;
opacity: 0.1;
}
cssBlaster21895
  • 3,670
  • 20
  • 33