Javascript css父级/子级出现问题

我在css父/子项方面遇到问题：

bg.className=“center”；
bg.style.backgroundColor=“蓝色”；
var container=document.createElement（“div”）；
container.className='container'；
container.style.height='100px'；
container.style.width='110px'；
var internal=document.createElement（“div”）；
inner.className='inner'；
var title=document.createElement（“p”）；
title.textContent=“测试”；
title.className='centrritre'；
title.style.color='黑色'；
内附子项（标题）；
容器。子容器（内部）；
bg.appendChild（容器）；
document.getElementById（'bar'）。addEventListener（“更改”，函数（）{
bg.style.opacity=this.value/100；
container.style.opacity=1；
document.getElementById（'valeurBar'）。innerHTML=this.value+“%”；
}，假）
.center{
显示：块；
保证金：自动；
位置：绝对位置；
顶部：0；底部：0；左侧：0；右侧：0；
高度：250px；
宽度：500px；
文本对齐：居中；
}
.货柜：在{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.集装箱{
位置：绝对！重要；
边框：3倍纯黑；
不透明度：1；
}
.center>div{
不透明度：1；
}
.内部{
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
宽度：100%；
}
中庭酒店{
字号:25 ;；
字体大小：粗体；
颜色：白色；
保证金：自动；
文本对齐：居中；
左侧填充：4px；
右侧填充：4px；
}
不透明度：100%
如果更改父对象的不透明度，子对象将受到影响。
不过，您可以做一个技巧，即更改父对象的背景不透明度

编辑：图像背景的解决方案

如果背景是图像，则可以创建一个填充div的图像作为背景，并按如下方式更改其不透明度

HTML

CSS

如果更改父对象的不透明度，子对象将受到影响。
不过，您可以做一个技巧，即更改父对象的背景不透明度

编辑：图像背景的解决方案

如果背景是图像，则可以创建一个填充div的图像作为背景，并按如下方式更改其不透明度

HTML

CSS

但您可以将背景颜色更改为
RGBA
值，以获得以下结果：


bg.className=“center”；
bg.style.backgroundColor=“蓝色”；
var container=document.createElement（“div”）；
container.className='container'；
container.style.height='100px'；
container.style.width='110px'；
var internal=document.createElement（“div”）；
inner.className='inner'；
var title=document.createElement（“p”）；
title.textContent=“测试”；
title.className='centrritre'；
title.style.color='黑色'；
内附子项（标题）；
容器。子容器（内部）；
bg.appendChild（容器）；
document.getElementById（'bar'）。addEventListener（“更改”，函数（）{
bg.style.backgroundColor=“rgba（0,0255，“+this.value/100+”）；
container.style.opacity=1；
document.getElementById（'valeurBar'）。innerHTML=this.value+“%”；
}，假）
.center{
显示：块；
保证金：自动；
/*位置：绝对位置*/
顶部：0；底部：0；左侧：0；右侧：0；
高度：250px；
宽度：500px；
文本对齐：居中；
}
.货柜：在{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.集装箱{
位置：绝对！重要；
边框：3倍纯黑；
背景：蓝色；
}
.内部{
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
宽度：100%；
}
中庭酒店{
字号:25 ;；
字体大小：粗体；
颜色：白色；
保证金：自动；
文本对齐：居中；
左侧填充：4px；
右侧填充：4px；
}
不透明度：100%
但您可以将背景颜色更改为
RGBA
值以获得以下结果：


bg.className=“center”；
bg.style.backgroundColor=“蓝色”；
var container=document.createElement（“div”）；
container.className='container'；
container.style.height='100px'；
container.style.width='110px'；
var internal=document.createElement（“div”）；
inner.className='inner'；
var title=document.createElement（“p”）；
title.textContent=“测试”；
title.className='centrritre'；
title.style.color='黑色'；
内附子项（标题）；
容器。子容器（内部）；
bg.appendChild（容器）；
document.getElementById（'bar'）。addEventListener（“更改”，函数（）{
bg.style.backgroundColor=“rgba（0,0255，“+this.value/100+”）；
container.style.opacity=1；
document.getElementById（'valeurBar'）。innerHTML=this.value+“%”；
}，假）
.center{
显示：块；
保证金：自动；
/*位置：绝对位置*/
顶部：0；底部：0；左侧：0；右侧：0；
高度：250px；
宽度：500px；
文本对齐：居中；
}
.货柜：在{
内容：“；
显示：内联块；
垂直对齐：中间对齐；
身高：100%；
}
.集装箱{
位置：绝对！重要；
边框：3倍纯黑；
背景：蓝色；
}
.内部{
显示：内联块；
垂直对齐：中间对齐；
文本对齐：居中；
宽度：100%；
}
中庭酒店{
字号:25 ;；
字体大小：粗体；
颜色：白色；
保证金：自动；
文本对齐：居中；
左侧填充：4px；
右侧填充：4px；
}
不透明度：100%
当您更改父节点不透明度时，恐怕也会更改所有子节点

我要做的是将“bd”div与容器分离，然后重叠位置。。。大概是这样的：


bg.className=“center”；
bg.style.backgroundColor=“蓝色”；
var container=document.createElement（“div”）；
container.className='container'；
container.style.backgroundColor=bg.style.backgroundColor；
container.style.height='100px'；
container.style.width='110px'；
var internal=document.createElement（“div”）；
inner.className='inner'；
var title=document.createElement（“p”）；
title.textContent=“测试”；
title.className='centrritre'；
title.style.color='黑色'；
inner.ap
<input type='range' min='0' max='100' value='100' style='width:250px' id='bar'><span id='valeurBar'>100%</span>

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

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