麻煩與我遇到的CSS父/子麻煩的CSS父/子

Question

：

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; 
 
\t height : 250px; 
 
\t 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 { 
 
\t opacity:1; 
 
} 
 

 
.inner { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t text-align:center; 
 
\t width:100%; 
 
} 
 

 
.centrerTitre{ 
 
\t font-size: 25; 
 
    font-weight: bold; 
 
\t color : white; 
 
\t margin : auto; 
 
\t text-align : center; 
 
\t padding-left : 4px; 
 
\t 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;但那不起作用。

我如何分別更改父級的不透明度而不更改孩子的不透明度？

感謝您的關注。

編輯：對不起，我簡化了我的問題以便理解，通常背景是圖像而不是簡單的顏色。我如何用圖像做這個訣竅？ （基本上，我走了，因爲我不知道我是否可以上傳圖片...）

Answer 1

如果您更改父母不透明度，後代將受到影響。 但是，你可以做一個技巧，改變父母的背景不透明度。

編輯：解圖像背景

如果你的背景是一個圖像，你可以創建一個充滿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"); 
} 

Answer 2

但你可以改變背景顏色很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; 
 
\t height : 250px; 
 
\t 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 { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t text-align:center; 
 
\t width:100%; 
 
} 
 

 
.centrerTitre{ 
 
\t font-size: 25; 
 
    font-weight: bold; 
 
\t color : white; 
 
\t margin : auto; 
 
\t text-align : center; 
 
\t padding-left : 4px; 
 
\t 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>

Answer 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; 
 
\t height : 250px; 
 
\t 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 { 
 
\t opacity:1; 
 
} 
 

 
.inner { 
 
\t display: inline-block; 
 
\t vertical-align: middle; 
 
\t text-align:center; 
 
\t width:100%; 
 
} 
 

 
.centrerTitre{ 
 
\t font-size: 25; 
 
    font-weight: bold; 
 
\t color : white; 
 
\t margin : auto; 
 
\t text-align : center; 
 
\t padding-left : 4px; 
 
\t 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>