画像はまだ不透明度値の変化後の半透明の不透明度を示し

Question

機能：

次のページが半透明であるとopacity: 0.68;を持っており、ページ内に、私はopacity: 1.0;とのイメージを持っています。主なアイデアは、画像が半透明の背景上のオーバーレイに配置され、画像は背景と同じ半透明のプロパティを共有するべきではないということです。

問題：

半ページ内の画像は、私が1.0であることを画像の不透明度プロパティを設定しているにもかかわらず、同じ半透明の性質を共有しています。

メインの背景から設定した不透明度プロパティを表示せずに画像をソリッドステートに設定するにはどうすればよいですか？

.BrandMenu { 
 
    background-color: #D3D3D3; 
 
    filter: alpha(opacity=98); 
 
    opacity: 0.98; 
 
} 
 
.BrandDescription { 
 
    background-color: #FFFFFF; 
 
    filter: alpha(opacity=200); 
 
    opacity: 1.0; 
 
}

<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: none; z-index=9; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px; z-index=99;"> 
 
</div>

Answer 1

理由は@eisbehrの答えで説明されていますが、子要素の不透明度に影響を与えることなく、rgba()値を持つ半透明のバックグラウンドを持つことができます：

.BrandMenu { 
 
    background-color: rgba(211, 211, 211, 0.98); 
 
} 
 
.BrandDescription { 
 
    background-color: #FFFFFF; 
 
}

<div id="Park_BrandDescription" class="BrandMenu" align="center" style="position:absolute; width:1080px; height:1920px; background-repeat: no-repeat; display: block; top:0px; margin:auto;"> 
 

 
    <img id="Pa_Description" class="BrandDescription" style="position:absolute; width: 1080px; height:650px; top:500px; background-color: white; left:0px;" src="http://lorempixel.com/400/200"> 
 
</div>

このようなセットアップを画像化

と不透明度のない2.0値はありません、最大1.0（100％）

あります

Answer 2

あなたは親要素が完全に表示されていないとき、opacityを持つ要素が完全に見えるようにすることはできません。両親によってopacityが引用されており、1.0が最大です。

<div style="opacity: .5;"> 
    This text here has a opacity of 50%! 
    <div style="opacity: .5;"> 
    This text here has a opacity of 25%! 
    <div style="opacity: .5;"> 
     This text here has a opacity of 12.5%! 
     <div style="opacity: 1;"> 
     This text here has still a opacity of 12.5%! 
     </div> 
    </div> 
    </div> 
</div>