CODEWITHSUNDEEP
javascripthtmlcssopacity
M. Ozn
M. Ozn

Reputation: 1210

Trouble with the css parent/child

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...)

Upvotes: 0

Views: 95

Answers (3)

Sapikelio
Sapikelio

Reputation: 2604

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");
}

Upvotes: 1

jolmos
jolmos

Reputation: 1575

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>

Upvotes: 1

Elena
Elena

Reputation: 1829

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>

Upvotes: 4

Related Questions