css父/子的问题答案

【问题标题】：Trouble with the css parent/childcss父/子的问题
【发布时间】：2016-01-07 22:24:54
【问题描述】：

我在使用 css 父/子时遇到问题：

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 ： .centerer > div { opacity : 1;但这没有用，我还尝试将 container.style.opacity = 1; 放到侦听器中但这也没有用。

如何在不改变孩子不透明度的情况下单独改变父母的不透明度？

感谢您的关注。

编辑：对不起，我为您的理解简化了我的问题，通常背景是图像而不是简单的颜色。我怎样才能用图像做这个把戏？（基本上，我走了这条路，因为我不知道我是否可以上传图片......）

【问题讨论】：

可以的话请加个jsfiddle
您不能在不影响所有后代的情况下更改父代的不透明度。为什么要更改不透明度？
How to set opacity in parent div and not affect in child div?的可能重复

标签： javascript html css 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>

【讨论】：

感谢您的回答，但我简化了我的理解问题。通常，我在背景中有一张图片...
啊。为什么要简化呢？试试这样的：css-tricks.com/snippets/css/transparent-background-images
我编辑了我的问题来解释为什么要简化，因为我不知道我是否可以上传图片！回答你，我css不差，不知道怎么用"after"属性……
应该是这样的：#bg:after { content: ''; background: url(image.jpg); height: 250px; width: 500px; position: relative; left: 0; z-index: -1; display: block; } 但是你需要编辑js来影响伪元素的不透明度
我正在尝试用 JS 添加它（因为图像在我的项目中是动态的）我这样做了：document.styleSheets[0].addRule('#bg:after', "background-image : url('500pxBlack.png')", 0);但它不起作用（我在 IE 上，强制：'（）编辑：好的背景出现：document.styleSheets[0].cssRules[0].style.backgroundImage = "url('500pxBlack.png' )"; 如果我不改变 JS，不透明度会像以前一样改变，孩子也是。我正在尝试获取正确的 JS 代码来仅更改父不透明度。非常感谢！

【解决方案2】：

如果你改变父母的不透明度，后代会受到影响。但是，您可以做一个技巧来改变父母的背景不透明度。

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

如果您的背景是图像，您可以创建一个填充 div 作为背景的图像，并像这样更改其不透明度。 Demo

HTML

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

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

【讨论】：

嗨！感谢您的回答。我简化了我的问题，但通常我在背景中有一张图片，所以我不能这样做
没问题，我等着。还是谢谢！
已解决。检查小提琴。希望它有所帮助:)
我很高兴它帮助了你:)

【解决方案3】：

恐怕当你改变父不透明度时，你也在改变所有后代节点。

我会做的是将'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>

【讨论】：

嗯，不是真的...只是“容器”没有背景颜色。我刚刚编辑了它......无论如何，我更喜欢你的答案，所以我赞成它。