子どもより不透明度の低いコンテナ

Question

background-colorでウェブページをopacity: 0.5にしたいが、ウェブページ内のコンテンツのデフォルト値はopacity: 1となる。

問題があるのは、opacity: 0.5をコンテナに設定した場合、このコンテナ内のすべての子が同じopacity値を取得することです。

は、私は約opacity specificationsを検索して見てきたこの：

継承されません

が、私の場合、それは私がより多くのビットを検索し、別のtransparency specificationで発見したので、継承されています私はこれを見た：

オブジェクトがコンテナ要素の場合、効果はコンテナ要素の内容は、マスクの各ピクセルの値があるマスクを使用して、現在の背景に対してブレンドされた。

だから、子供よりも不透明度の低い親を設定することは不可能だと思うので、それを得るための回避策がありますか？

_{注：私は、私はそれを「再生する」シンプルJSFiddleを作成しました（あなたは簡単にそれを再現することができるので）、この場合にコードを追加することが非常に重要ではないと思われるが、here。}

ありがとうございます！

Answer 1

いいえ、不可能です。

内容に影響を与えずに半透明の背景のみを使用する場合は、rgba colorを使用できます。

この仕様では、色の不透明度を指定できるようにRGBカラーモデルが "alpha"を含むように拡張されています。

例えば、

body { 
 
    background: linear-gradient(to right, #fff, #ff0, #0ff); 
 
} 
 
p { 
 
    background-color: rgba(0, 0, 255, 0.3); /* semi-transparent solid blue */ 
 
    padding: 70px; 
 
}

<p>Semi-transparent background but fully opaque text</p>

Answer 2

ない可能。親コンテナへの不透明度も子供に適用されます。不透明効果のある背景を使用する場合は、背景色にRGBAを使用できます。これはソリッドカラーに適用され、グラデーションを扱うオプションもあります。

イメージを使用したい場合は、div/containerを使用してイメージの背後に絶対イメージを配置できます。その容器に不透明度と位置を与えます。