将不透明度设置为父项但不包含子项

我想将不透明度设置为父div，但不是1个特定的子div。所以我有一个像HTML代码：将不透明度设置为父项但不包含子项

body { 
 
    background-image: url(http://url.jpg) 
 
} 
 
#main { 
 
    opacity: 0.9; 
 
} 
 
#slider { 
 
    opacity: 1; 
 
}

<body> 
 
    <div id="main"> 
 
    <div id="slider"> 
 
    </div> 
 
    <div id="content-wrapper"> 
 
    </div> 
 
    </div> 
 
</body>

显然，这是行不通的。整个#main div现在透明到背景div。这是我想要的，但不是#slider div。出于某种原因，当仅将＃opacity设置为＃content-wrapper时，根本没有任何反应。任何想法？

编辑：我不能使用rgba颜色，因为我想要通过背景图像。你能解释为什么添加不透明到＃content-wrapper不起作用吗？

2016-08-24 RobbTe

如果'background'是纯色，所以它能够更好地使用'RGBA（0,0,0，.5）'（颜色按你的要求），而不是'opacity' –

嗨，我不能使用RGB颜色，因为我想背景图像来通过。你能解释为什么添加不透明到＃content-wrapper不起作用吗？ – RobbTe

也许有RGBA或HSLA颜色代码可以帮助

#someParent { 

background: rgba(0,0,0,0.5); 

}

2016-08-24 12:36:30 Friend

嗨，我不能使用RGB颜色，因为我想背景图像来通过。你能解释为什么添加不透明到＃content-wrapper不起作用吗？ – RobbTe

回答