18

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

4

4 に答える 4

33

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

于 2013-09-10T14:21:17.050 に答える
2

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

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

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

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

    これは IE8 以前では機能しないため、線形グラデーション フィルターを使用する回避策を使用できます。

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

    16 進数の最初の 2 桁が #80 であることがわかります。これは間違いではなく、10 進数ではありません。16 進数は基数 16 です。これにより #80 が中間点になり、不透明度が 50% に設定されます。ちょっとややこしいですね、わかります！

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

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

于 2013-09-10T14:21:56.800 に答える
1

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

于 2013-09-10T14:21:46.100 に答える