CSS 不透明度子要素が親要素の透明度を継承するためのソリューションの詳細な説明

背景画像: linear-gradient(-180deg, rgba(20,20,20,0.00) 19%, #303030 100%);
不透明度: 0.5;

<div class="コンテナ">
    <div class="content">
        <p>私はクラスコンテンツを持つ DIV です</p>
        <p>私の背景はクラスの背景です</p>
        <p>相対配置と絶対配置を使用して、クラスの背景を持つ DIV を自分の位置に移動しました。 </p>
        <p>同時に、z-index を大きくすると、その上に浮かぶようになります。 :)</p>
    </div>
    <div class="background">​​</div>
</div>

。容器 {
    幅: 300ピクセル;
    高さ: 250px;
    色: #fff;
    位置:相対;
}
。コンテンツ {
    位置:相対;
    zインデックス:5;
    幅: 100%;
    高さ: 100%;
    オーバーフロー: 非表示;
}
。背景 {
    背景色: #37a7d7;
    位置:絶対;
    上:0px;
    左:0px;
    幅:100%;
    高さ:100%;
    zインデックス:1;
    /*IE7、8と互換性あり*/
       -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(不透明度=50)";
    フィルター: アルファ(不透明度=50);
    不透明度:.5;
}