0

I would like to set opacity to a parent div but not 1 particular child div. So i have a html code like:

body {
  background-image: url(http://url.jpg)
}
#main {
  opacity: 0.9;
}
#slider {
  opacity: 1;
}
<body>
  <div id="main">
    <div id="slider">
    </div>
    <div id="content-wrapper">
    </div>
  </div>
</body>

Obviously this won't work. The whole #main div is now transparant to the background div. That is what i want but not the #slider div. For some reason, when only setting opacity to the #content-wrapper, nothing happens at all. Any ideas?

Edit: I can't use an rgba color, since i would like the background image to come through. Could you explain why adding opacity to #content-wrapper is not working?

RobbTe
  • 385
  • 4
  • 19
  • If `background` is solid colored, So its better to use `rgba(0,0,0,.5)` (color as per your requirement) instead of `opacity` – Abhishek Pandey Aug 24 '16 at 12:38
  • Hi, I can't use an rgba color, since i would like the background image to come through. Could you explain why adding opacity to #content-wrapper is not working? – RobbTe Aug 25 '16 at 07:34

1 Answers1

3

Maybe with rgba or hsla color code can help

#someParent {

background: rgba(0,0,0,0.5);

}
Friend
  • 506
  • 4
  • 10
  • Hi, I can't use an rgba color, since i would like the background image to come through. Could you explain why adding opacity to #content-wrapper is not working? – RobbTe Aug 25 '16 at 07:34