javascript - CSS父/子问题

Question

我在使用 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>

我有一个 div child 到一个 div parent 。 我们可以用值 bar 改变父级的不透明度。但是当我们这样做时， child 的不透明度也会改变。 我试着把 css : .centrer > div { opacity : 1;但这没有用，我也试着把 container.style.opacity = 1; 给听众但这也不起作用。

如何在不改变 child 的不透明度的情况下单独改变 parent 的不透明度？

感谢您的关注。

编辑:很抱歉为了您的理解我简化了我的问题，通常背景是图像而不仅仅是颜色。我怎样才能用图像来解决这个问题？ (基本上，我就这样走了，因为我不知道我是否可以上传图片...)

Answer 1

但是您可以将背景颜色更改为 RGBA 值以获得此:

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>