css父级/子级出现问题

Trouble with the css parent/child

本文关键字：问题 父级 css      更新时间：2023-09-26

我在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子级到一个div父级。我们可以使用值栏更改父对象的不透明度。但当我们这样做的时候，孩子的不透明性也会改变。我尝试将其放入css：.centrer>div｛opacity:1；｝中，但没有成功，我还尝试将container.style.opacity=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>

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

EDIT：图像背景解决方案

如果你的背景是一个图像，你可以创建一个图像来填充div作为背景，并像这样改变它的不透明度。演示

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

恐怕在更改父级不透明度时，也会更改所有子级节点。

我会做的是将"bd"div与容器分离，然后重叠位置。。。像这样的东西：

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>

相关文章：