親の不透明度を継承する子要素

Question

私はWebページ上で作業しています。背景画像を示す透明なdivにボタンを配置したいと思います。しかし、ボタンを置くと透明になります。どうすれば透明にできないのですか？

div.background { 
 
    background: url(klematis.jpg) repeat; 
 
    border: 2px solid black; 
 
} 
 
div.transbox { 
 
    margin: 30px; 
 
    background-color: #ffffff; 
 
    border: 1px solid black; 
 
    opacity: 0.6; 
 
    filter: alpha(opacity=60); /* For IE8 and earlier */ 
 
} 
 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 
    <div class="transbox"> 
 
    <p>This is some text that is placed in the transparent box.</p> 
 
    <input type="button" value="Ok"> 
 

 
    </div> 
 
</div>

Answer 1

使用代わりopacityのrgba()色法：

div.background { 
 
    background: url(klematis.jpg) repeat; 
 
    border: 2px solid black; 
 
} 
 
div.transbox { 
 
    margin: 30px; 
 
    background-color: rgba(255, 255, 255, 0.6); 
 
    border: 1px solid black; 
 
} 
 
div.transbox p { 
 
    margin: 5%; 
 
    font-weight: bold; 
 
    color: #000000; 
 
}

<div class="background"> 
 
    <div class="transbox"> 
 
    <p>This is some text that is placed in the transparent box.</p> 
 
    <input type="button" value="Ok"> 
 
    </div> 
 
</div>

opacityと

、効果は、子要素とを含む、素子全体に適用されますコンテンツ。 MDNから

：

[不透明度]の値は、子要素によって継承されていなくても、その内容、 含め、全体としての要素に適用されます。したがって、 要素とそれに含まれる子要素は、要素とその子要素が互いに異なる不透明度の異なる を持っていても、要素の背景に対して同じ相対不透明度 を持ちます。

background-colorはrgba()と設定されていますが、例外です。

rgba()カラーモデルでは、opacityをアルファチャンネル経由で設定できます。

親をdiv { background-color: rgba (255, 255, 255, 0.6); }に設定すると、background-colorのみでopacityが0.6に設定されます。子要素は影響を受けません。

はこちら詳細はこちら：不透明度とイメージの場合A brief introduction to Opacity and RGBA

は、以下を参照してください。

• Can I set an opacity only to the background image of a div?
• CSS: set background image with opacity?