web-dev-qa-db-ja.com

透明なBGで一貫した「知覚された」色を取得するにはどうすればよいですか?

漬け物です。

半透明の黒い背景(85%アルファ)にフォームコントロール(ボタン、チェックボックス、テキスト入力など)を作成する必要があります。

これまでのところ、次のようになります。

Le checkboxes

上の2つと下の2つの違いに注意してください。違いは、下と右の境界線が、そのクールなインセットの外観を与えるのに十分なほど軽いことです。問題?これらの境界線の1つを除いてすべて同じ色です。

:(

透明な背景にあるため、線はその背後の色に基づいて明るくまたは暗く見えます。したがって、そのきちんとしたはめ込みの外観は、その下にあるものに基づいて行き来します。きちんとしたはめ込みの外観が常にあるようにしたいのですが、どうすればよいですか?このためのブレンドモードのトリックはありますか?

追伸私はこれが最終的にFlashで表示されるようになることを忘れていたので、ブレンドモードなどで少し楽しみます。

編集:問題をより明確にするために別の画像を作成しました(「暗すぎる」と「明るすぎる」で、まだ右と下の境界を参照しています)。

Another Example

6

画面またはカラーダッジブレンディングモードを使用できます。または、純粋な白色を使用して、境界領域の透明度を明るくしたいパーセンテージに設定することもできます。これは、その明るさのグレー色を使用したスクリーンブレンディングモードを使用する場合と同じです。

編集:
知覚される明度は、画像で見たように、FGカラーが背景に使用されているBGカラーに基づいています。現在のところ、背景が何であっても、チェックボックスのハイライトが同じ色と陰影でレンダリングされています。したがって、背景が明るい場合は、明るさを少しまたはまったく増加させるだけですが、背景が暗い場合は、明るさを大幅に増加させます。これにより、ハイライトが不自然な/一貫性のない外観になります。

修正は、ハイライトをBGをX%明るくすることです。これにより、隣接するピクセルより常にX%明るくなります。 「知覚された」明度は、背景に関係なくX%になります(背景が明るすぎる場合を除いて、輝度を最大X%上げることはできません)。

2
Lèse majesté