0

透明度もある背景の上に透明度のあるテキスト フィールドを重ねようとしています。問題は、透明度が適用されていないかのように、テキスト フィールドが不透明に見えることです。フィールドと背景の両方が表示されるようにするにはどうすればよいですかある程度の透明度?

これは、すべてを含む div です。

#wrapper {                                                                                                                                                              
  width: 940px;                                                                                                                                                         
  margin: 0 auto;                                                                                                                                                       
  background: rgba(0, 0, 0, 0.6);                                                                                                                                       
}

そして、これは私の入力フィールドです：

input[type=text] {                                                                                                                                                      
  -webkit-border-radius: 5px;                                                                                                                                           
  -moz-border-radius: 5px;                                                                                                                                              
  border-radius: 5px;                                                                                                                                                    
  height: 30px;                                                                                                                                                         
  padding-top: 5px;                                                                                                                                                     
  background: rgba(0, 0, 0, 0.8);                                                                                                                                       
  color: white;                                                                                                                                                         
  border: 1px solid black;                                                                                                                                              
}

これはどのように見えるかです：

ここに画像の説明を入力

4

3 に答える 3

1

透明度のスタックに問題があるようです。入力ボックスで 0.8 の透明度を達成するには、さらに 0.2 の透明度を入力に追加する必要があります (含まれている要素から必要な 0.8 の 0.6 を効果的に継承しているため) . こちらをご覧ください:

http://jsfiddle.net/e6Z8N/1/

html:

<div id="wrapper">
<input type="text" />
</div>​

CSS:

#wrapper {                                                                                                                                                              
width: 940px;                                                                                                                                                         
  margin: 0 auto;                                                                                                                                                       
  background: rgba(0, 0, 0, 0.6);
padding:50px;    
}  

input[type=text] {                                                                                                                                                      
  -webkit-border-radius: 5px;                                                                                                                                           
  -moz-border-radius: 5px;                                                                                                                                              
  border-radius: 5px;                                                                                                                                                    
  height: 30px;                                                                                                                                                         
  padding-top: 5px;                                                                                                                                                     
  background: rgba(0, 0, 0, 0.2);                                                                                                                                       
color: white;                                                                                                                                                         
  border: 1px solid black;                                                                                                                                              
} ​
于 2012-10-19T15:54:01.017 に答える
0

入力要素に適用されているデフォルトのブラウザ スタイルをクリアする必要がある場合があります。

-webkit-appearance: none;
-moz-appearance: none;
-o-appearance: none;
于 2012-10-19T15:58:24.080 に答える