解決策
2つのオプションがあり、間接的に不透明度の値を設定するには、rgba（）を使用して、この属性がダウンして継承されません、または不透明度が子要素によって継承されるので、次に達成するために同じレベルの要素にopacity属性は、具体的に言うために2つの方法の例を次に示します：
rgba()を使用して、間接的に不透明度を設定します。
rgba（）は、4つのパラメータを持って、最後のパラメータは、不透明度の値であり、単独で同じ効果を設定するには、不透明度が、これは、背景を制御する背景属性がダウンして継承されませんので、この問題に対する解決策は、次の例です：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
</head>
<style type="text/css">
.opacity{
position: relative;
width: 400px;
height: 300px;
color: black;
background: rgba(255,0,0,0.5);
}
.opacity-child{
}
.normal{
width: 400px;
height: 300px;
background: red;
color: black;
}
</style>
<body>
<div class="opacity">
<div class="opacity-child">子要素は、親要素のopacity属性を継承する。</div>
</div>
<div class="normal">子要素は、親要素のopacity属性を継承する。</div>
</body>
</html>
兄弟要素にopacity属性を付けます。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>opacity</title>
</head>
<style type="text/css">
.opacity{
position: relative;
width: 400px;
height: 300px;
color: black;
}
.opacity-child{
position: relative;
z-index: 1;
width: 100%;
height: 100%;
}
.opacity-child-background{
position: absolute;
top : 0px;
left: 0px;
width: 100%;
height: 100%;
background: red;
opacity: 0.5;
z-index: 0;
}
.normal{
width: 400px;
height: 300px;
background: red;
color: black;
}
</style>
<body>
<div class="opacity">
<div class="opacity-child">子要素は、親要素のopacity属性を継承する。</div>
<div class="opacity-child-background"></div>
</div>
<div class="normal">子要素は、親要素のopacity属性を継承する。</div>
</body>
</html>
透明性を実現するもう一つのトリック
filter:alpha(Opacity=0);
