web-dev-qa-db-ja.com

CSSの不透明度の背景色とテキストが機能しない

firefox OS用のアプリを作成していて、ボタンの背景の不透明度を0.5、テキストの不透明度を1にしたいのですが、機能しませんでした... cssを確認してください：

.button{
height:40px;
width:180px;
border-radius: 100px 100px 100px 100px;
border: 1px solid #FF9924;
display:inline-block;
background-color:#FF9924;
padding-top:5px;
opacity:0.5;
}


h1{
    padding: 5px 5px 5px 5px;
    text-align:center;
    font-size:20px;
    font-family: firstone;
    opacity:1.0;
}

ページ上：

<div class="menu">
    <div class="button"><h1>Start the fight</h1></div>
</div>
cssopacity
12
user2637946

rgba について読む必要があります

構文は次のとおりです。

 .button {
      background-color: rgba(255, 153, 36, 0.5)
 }

これが Hex-to-RGB Color Converter

9
Itay

rgba()を使用して、background-colorを目的のopacityに設定する必要があります。テキストの不透明度は変更されません。

CSS3.INFO でrgbaの詳細を読む

.button {
   //...
   background-color: rgba(255, 153, 36, 0.5); 
   //...
}

これを参照してください [〜＃〜]デモ[〜＃〜]

2
softvar

それは確かに不可能のようです。 .buttonの代わりに.buttonwrapperを作成してみてください。 .buttonwrapperの内側に、2つの絶対位置レイヤーを配置します。1つは不透明度0.5の実際のボタンを使用し、もう1つは不透明度1のテキストを背景なしで配置します。

<div class="buttonwrapper">
    <div class="button"></div>
    <div class="button_text"><h1>Text</h1></div>
</div>
0
Keugels

残りの部分に影響を与えずに、背景だけにopacityを与えることはできません...
代わりに、background-colorでalphaを試してください。

例.

.button{
  background-color: #FF9924; // for browser that don't accept alpha in color
  background-color: rgba(255, 153, 36, 0.5);
}
0
gmo