css parent/child 有问题
Trouble with the css parent/child
我在使用 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>
我有一个divchild变成了一个divparent。
我们可以用值 bar 改变 parent 的不透明度。但是当我们这样做时,child 的不透明度也会改变。
我试着输入 css : .centrer > div { opacity : 1;但这没有用,我也试着把 container.style.opacity = 1; 给听众但这也行不通。
如何在不更改 child 的不透明度的情况下单独更改 parent 的不透明度?
感谢您的关注。
编辑:很抱歉为了您的理解我简化了我的问题,通常背景是图像而不仅仅是颜色。我怎样才能用图像来解决这个问题?
(基本上,我就这样走了,因为我不知道我是否可以上传图片...)
如果您更改 parent 的不透明度,后代将受到影响。
但是你可以做一个技巧来改变parent的背景不透明度。
编辑:图像背景的解决方案
如果您的背景是图片,您可以创建一个填充 div 的图片作为背景,并像这样更改其不透明度。 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");
}
但是您可以将背景颜色更改为 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>
恐怕当你改变父不透明度时,你也会改变所有后代节点。
我会做的是将 '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>
我在使用 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>
我有一个divchild变成了一个divparent。 我们可以用值 bar 改变 parent 的不透明度。但是当我们这样做时,child 的不透明度也会改变。 我试着输入 css : .centrer > div { opacity : 1;但这没有用,我也试着把 container.style.opacity = 1; 给听众但这也行不通。
如何在不更改 child 的不透明度的情况下单独更改 parent 的不透明度?
感谢您的关注。
编辑:很抱歉为了您的理解我简化了我的问题,通常背景是图像而不仅仅是颜色。我怎样才能用图像来解决这个问题? (基本上,我就这样走了,因为我不知道我是否可以上传图片...)
如果您更改 parent 的不透明度,后代将受到影响。 但是你可以做一个技巧来改变parent的背景不透明度。
编辑:图像背景的解决方案
如果您的背景是图片,您可以创建一个填充 div 的图片作为背景,并像这样更改其不透明度。 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");
}
但是您可以将背景颜色更改为 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>
恐怕当你改变父不透明度时,你也会改变所有后代节点。
我会做的是将 '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>