2016-07-07 18 views
2

私は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>

+0

あなたはボタン自体のスタイルを設定しようとしたことがありますか? (コードには表示されていません) – nnnnnn

+0

ボタン自体に1の不透明度を入れ、IDまたはクラスを追加します – JordanHendrix

答えて

5

使用代わりopacityrgba()色法:

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-colorrgba()と設定されていますが、例外です。

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

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

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

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

+1

ありがとうございました。 –

関連する問題