web-dev-qa-db-ja.com

入力フィールドの不透明度をその中のテキストの色に影響を与えないようにするにはどうすればよいですか？

暗い/黒い背景画像と白い入力フィールドがあります。入力フィールドに50％の不透明度を与え、テキスト/値を白一色にしたい（#fff）。しかし、不透明度を適用すると、入力要素の背景とテキストの両方に影響します。入力フィールドの背景のみを変更するにはどうすればよいですか？

htmlcssinputopacity
15
Jordan Simon

そのためには、background-color: rgba(0, 0, 0, 0.5)を使用できます。最初の3つの数字はrgb（赤、緑、青）形式の背景色で、4番目の数字は0〜1のスケールの不透明度レベルです。

22
Beniamin Szabo

あなたが言うことから、あなたはbackgroundのみに影響を与えたいです。

背景を（部分的に）トランスレントにするためには、

a）PNG背景

または

b）RGBa背景-参照 https://developer.mozilla.org/en-US/docs/Web/CSS/color_value#rgba（）

そうです：background:rgba(0,0,0,0.2);

これはIE8以下ではサポートされていません。

1
harley_woop

単純に半透明のpngを作成し、入力の不透明度を設定する代わりに、それを背景画像として使用しないのはなぜですか。または、IE8をサポートする必要がない場合は、 rgba（） を使用することもできます。

1
Simon

問題は、要素全体の不透明度を変更していることです。そのため、すべての子要素は透明なプロパティを厳密に継承します。

できることがいくつかあります。

  1. 背景のみをターゲットにして、RGBA値に設定できます。

    background: rgba(255, 255, 255, 0.5);

    これはIE8以前では機能しないため、線形勾配フィルターを使用して回避策を使用できます。

    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#80ffffff', endColorstr='#80ffffff',GradientType=0 );

    最初の2つの16進数の場所が＃80であることがわかります。これは間違いではなく、10進数値でもありません。 16進数は16を基数としており、これにより＃80が中央点になり、不透明度が50％に設定されます。少しわかりにくいかもしれません。

  2. 入力フィールドからスタイルを削除し、代わりに入力フィールドの周りにラッパーを追加して、代わりにスタイルを設定することができます。

  3. 半透明のPNGを背景画像として使用して、繰り返すように設定できます。

0
Matthew R.