3

ここにボタン付きのdivがあります：

半透明ボタン付きメニュー

半透明の背景色を維持しながら、divの内容を不透明にしたい。

ボックスにはメニューが含まれます。

#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid #1F5899 ;
height: 200px;
width: 400px; 
padding: 20px;
opacity:0.4;
background-color: #6AA6D9;

}
div.calcMenuContents {
opacity: 1;
}

[実行] ボタンは、calcMenuContents div 内に含まれています。

<div id="calculationMenu">
<div id="calcMenuContents">

    <button onclick="runCalculations(2)" class="insideMenu">Run</button> 

</div>
</div>

calcMenuContents が半透明にならないようにするにはどうすればよいですか?

更新: 代替ソリューション (div 全体ではなく、div の特定の属性を設定する) を提供してくれた BoltClock に感謝します。私の唯一の問題は、親が

固定メニュー

4

4 に答える 4

4

解決策があります！rgba の背景値を使用すると、必要な場所に透明性を持たせることができます。

#calculationMenu
{
    background: rgba(0, 0, 0, 0.4);
    /*opacity: 0.4;*/
    padding: 20px;
}

div.calcMenuContents
{
    background: rgba(255, 0, 0, 1);
    /*opacity: 1;*/
}​

http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/1/

テキストについては、同じ rgba コードをそのまま使用できますが、CSS の color プロパティに設定します。

color: rgba(255, 255, 255, 1);

ただし、これを機能させるには、すべてに rgba を使用する必要があります。すべての親要素の不透明度を削除する必要があります。

http://jsfiddle.net/Kyle_Sevenoaks/TK8Lq/2/

rgba()を使用

于 2013-11-11T14:34:34.673 に答える
3

親要素の不透明度を実際にキャンセルすることはできませんが、半透明になる親要素の唯一の部分が背景とその境界線である場合、それらの 16 進数の色をrgba()、指定した不透明度に基づいた値に置き換えることができます、opacity宣言を完全に削除します。

#calculationMenu {
text-align: center;
margin-left: auto;
margin-right: auto;
border: 1px solid rgba(31, 88, 153, 0.4);
height: 200px;
width: 400px; 
padding: 20px;
background-color: rgba(106, 166, 217, 0.4);
}
于 2013-11-11T14:25:30.857 に答える
2

背景色を RGBA に変更できるため、次のようになります。

background-color: rgba(106, 166, 217, 0.4);

私が正しければ

于 2013-11-11T14:28:36.453 に答える
2

子要素の不透明度を変更することはできません。無地の背景と不透明度の代わりに、半透明の .png 画像を「calculationMenu」div の背景として使用してみてください。

于 2013-11-11T14:28:50.623 に答える