0

I'm having trouble with the css parent/child :

bg.className = "centrer";
bg.style.backgroundColor = "blue";

var container = document.createElement("div");
container.className = 'container';
container.style.height = '100px';
container.style.width = '110px';
var inner = document.createElement("div");
inner.className = 'inner';
var title = document.createElement("p");
title.textContent = "Test";
title.className = 'centrerTitre';
title.style.color = 'black';
inner.appendChild(title);
container.appendChild(inner);

bg.appendChild(container);

document.getElementById('bar').addEventListener("change", function(){
  bg.style.opacity = this.value/100;
  container.style.opacity = 1;
  document.getElementById('valeurBar').innerHTML = this.value + "%";
}, false);
.centrer {
    display: block;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
 height : 250px;
 width : 500px;
    text-align : center;
}

.container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container {
    position:absolute !important;
    border:3px solid black;
    opacity : 1;
}

.centrer > div {
 opacity:1;
}

.inner {
 display: inline-block;
 vertical-align: middle;
 text-align:center;
 width:100%;
}

.centrerTitre{
 font-size: 25;
    font-weight: bold;
 color : white;
 margin : auto;
 text-align : center;
 padding-left : 4px;
 padding-right : 4px;
}
Opacity : <input type='range' min='0' max='100' value='100' style='width:250px' id='bar'><span id='valeurBar'>100%</span>
<div id="bg"></div>

I have a div child into a div parent. We can change the opacity of the parent with the value bar. But when we do it, opacity of child change too. I tried to put into css : .centrer > div { opacity : 1; } but that didn't works, I also tried to put to the listener the container.style.opacity = 1; but that didn't works too.

How can I separately change the opacity of the parent without changing the child's opacity ?

Thanks for your attention.

EDIT : I'm sorry I simplified my problem for your comprehension, normally the background is an image and not simply a color. How can I do the trick with an image ? (Basically, I'm gone this way because I didn't knew if I could upload an image...)

M. Ozn
  • 1,018
  • 1
  • 19
  • 42
  • Please add a jsfiddle if you can – Marko Mackic Jan 07 '16 at 12:39
  • 2
    You cannot change the opacity of the parent without affecting all descendants. Why are you changing the opacity? – Paulie_D Jan 07 '16 at 12:44
  • 1
    Possible duplicate of [How to set opacity in parent div and not affect in child div?](http://stackoverflow.com/questions/10879045/how-to-set-opacity-in-parent-div-and-not-affect-in-child-div) – Refilon Jan 07 '16 at 13:08

3 Answers3

4

But you can change the background colour to be a RGBA value to get this:

bg.className = "centrer";
bg.style.backgroundColor = "blue";
var container = document.createElement("div");
container.className = 'container';
container.style.height = '100px';
container.style.width = '110px';
var inner = document.createElement("div");
inner.className = 'inner';
var title = document.createElement("p");
title.textContent = "Test";
title.className = 'centrerTitre';
title.style.color = 'black';
inner.appendChild(title);
container.appendChild(inner);

bg.appendChild(container);

document.getElementById('bar').addEventListener("change", function(){
  
  bg.style.backgroundColor = "rgba(0,0,255," + this.value/100 + ")";
  container.style.opacity = 1;
  document.getElementById('valeurBar').innerHTML = this.value + "%";
}, false);
.centrer {
    display: block;
    margin: auto;
    /* position: absolute; */
    top: 0; bottom: 0; left: 0; right: 0;
 height : 250px;
 width : 500px;
    text-align : center;
}

.container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container {
    position:absolute !important;
    border:3px solid black;
    background: blue;
}

.inner {
 display: inline-block;
 vertical-align: middle;
 text-align:center;
 width:100%;
}

.centrerTitre{
 font-size: 25;
    font-weight: bold;
 color : white;
 margin : auto;
 text-align : center;
 padding-left : 4px;
 padding-right : 4px;
}
Opacity : <input type='range' min='0' max='100' value='100' style='width:250px' id='bar'><span id='valeurBar'>100%</span>
<div id="bg"></div>
Elena
  • 1,719
  • 19
  • 24
  • Thanks for your answer, but I simplified my problem for the comprehension. Normally, I have an image in background... – M. Ozn Jan 07 '16 at 13:24
  • Ahh. Why simplify it? Try something like this: https://css-tricks.com/snippets/css/transparent-background-images/ – Elena Jan 07 '16 at 13:27
  • I edited my question to explain why simplify, it's because I didn't knew if I could upload an image ! To answer you, I'm not terrible in css, and I don't know how to use "after" properties... – M. Ozn Jan 07 '16 at 13:29
  • It would be something like this: `#bg:after { content: ''; background: url(image.jpg); height: 250px; width: 500px; position: relative; left: 0; z-index: -1; display: block; }` but then you need to edit the js to affect the opacity of the pseudo element – Elena Jan 07 '16 at 13:51
  • I'm trying to add it with JS (because image are dynamic on my project) I did this : document.styleSheets[0].addRule('#bg:after', "background-image: url('500pxBlack.png')", 0); But it doesn't worked (I'm on IE, obligatory :'( ) EDIT : Ok the background appeared with : document.styleSheets[0].cssRules[0].style.backgroundImage = "url('500pxBlack.png')"; If I don't change JS, the opacity change like before, childs too. I'm trying to get the right JS code to change only parent opacity. Thanks a lot ! – M. Ozn Jan 07 '16 at 14:04
  • Edit : Ok I was wrong. I just don't succeed to make the image appear dynamically. I tried it : document.styleSheets[0].insertRule("#bg:after { background-image: url('500pxBlack.png'); }", 0); document.styleSheets[0].cssRules[0].style.backgroundImage= "url('500pxBlack.png')"; But that don't seems to work. I'm still looking for a solution. Thanks for your attention – M. Ozn Jan 07 '16 at 14:17
1

If you change the parents opacity, descendant will be affected. However you can do a trick what is to change parent's background opacity.

EDIT: Solution for Image Background

If your background is an image you can create an image that fills the div as a background and change its opacity like this. Demo

HTML

<input type='range' min='0' max='100' value='100' style='width:250px' id='bar'><span id='valeurBar'>100%</span>

JS

var bg = document.getElementById('bg');
bg.className = "centrer";
bg.style.backgroundColor = "blue";

var imageBackground = document.createElement("div");
imageBackground.className = 'image-background';
imageBackground.style.height = '100%';
imageBackground.style.width = '100%';
bg.appendChild(imageBackground);


var container = document.createElement("div");
container.className = 'container';
container.style.height = '100px';
container.style.width = '110px';


var inner = document.createElement("div");
inner.className = 'inner';
var title = document.createElement("p");
title.textContent = "Test";
title.className = 'centrerTitre';
title.style.color = 'black';
inner.appendChild(title);
container.appendChild(inner);

bg.appendChild(container);

document.getElementById('bar').addEventListener("change", function(){

  imageBackground.style.opacity = this.value/100;
  document.getElementById('valeurBar').innerHTML = this.value + "%";
}, false);

CSS

.centrer {
    display: block;
    margin: auto;
    /* position: absolute; */
    top: 0; bottom: 0; left: 0; right: 0;
    height : 250px;
    width : 500px;
    text-align : center;
     position:relative;
}

.container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container {
    position:absolute !important;
    border:3px solid black;
    background: blue;
}

.inner {
    display: inline-block;
    vertical-align: middle;
    text-align:center;
    width:100%;
}

.centrerTitre{
    font-size: 25;
    font-weight: bold;
    color : white;
    margin : auto;
    text-align : center;
    padding-left : 4px;
    padding-right : 4px;
}

.image-background{
    position:absolute;
  background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCbA4ze7ExrnpgnTxMSBiifLg_TLz3HRLycnlmTWHkvMwcY5X2nZrI_w");
}
Sapikelio
  • 2,594
  • 2
  • 16
  • 40
1

I'm afraid when you change parent opacity, you are also changing al descendant nodes.

What I would do it's have the 'bd' div separated from the container and then overlap the positions... something like this:

bg.className = "centrer";
bg.style.backgroundColor = "blue";

var container = document.createElement("div");
container.className = 'container';
container.style.backgroundColor = bg.style.backgroundColor;
container.style.height = '100px';
container.style.width = '110px';
var inner = document.createElement("div");
inner.className = 'inner';
var title = document.createElement("p");
title.textContent = "Test";
title.className = 'centrerTitre';
title.style.color = 'black';
inner.appendChild(title);
container.appendChild(inner);

bg.parentNode.appendChild(container);

document.getElementById('bar').addEventListener("change", function(){
  bg.style.opacity = this.value/100;
  container.style.opacity = 1;
  document.getElementById('valeurBar').innerHTML = this.value + "%";
}, false);
.centrer {
    display: block;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
 height : 250px;
 width : 500px;
    text-align : center;
}

.container:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.container {
    display: block;
    margin: auto;
    position: absolute;
    top: 0; bottom: 0; left: 0; right: 0;
    border:3px solid black;
    opacity : 1;
}

.centrer > div {
 opacity:1;
}

.inner {
 display: inline-block;
 vertical-align: middle;
 text-align:center;
 width:100%;
}

.centrerTitre{
 font-size: 25;
    font-weight: bold;
 color : white;
 margin : auto;
 text-align : center;
 padding-left : 4px;
 padding-right : 4px;
}
Opacity : <input type='range' min='0' max='100' value='100' style='width:250px' id='bar'><span id='valeurBar'>100%</span>
<div id="bg"></div>
jolmos
  • 1,565
  • 13
  • 25
  • 1
    Well, not really... just 'container' hasn't background color. I have just edited it... Anyway, I like more your answer, so I upvoted it. – jolmos Jan 07 '16 at 13:05