2

私のクライアントの 1 人が、ナビゲーション バーのアクティブなリンクに非常に細い明るい線と非常に細い暗い線があることに気付きました。ほとんど目立ちませんが、あります。CSS を微調整してみましたが、線の幅が 1 ピクセル未満なので、それが CSS かどうかわかりません。

URL は次のとおりです: http://www.abqlibraryfoundation.org

ナビゲーション バーの [ホーム] リンクを見ると、アクティブなページとして、さびたオレンジ色で、左側に薄い明るいエッジがあることがわかります。右側には、オレンジ色とターコイズ色の間の暗い薄いエッジがあります.

誰がこれを引き起こしているのか知っていますか?

4

2 に答える 2

5

サブピクセル アーティファクトが原因です。

今日では、テキストを滑らかにするために建設的にも使用されています。これは、画面が垂直方向に配置された赤、緑、青のサブピクセルで構成されているためです。一部の画面では実際の順序が異なる場合があります。

rgb|rgb|rgb
---+---+---
rgb|rgb|rgb
---+---+---
rgb|rgb|rgb

これは、ナビゲーション バーに次のような配置があることを意味します。

blue       |    red    |   blue
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
---+---+---+---+---+---+---+---
  b|  b|  b|r  |r  |r  |  b|  b
           ^           ^
           |           Artifact caused by sub-pixels being far away (darker line)
           |
           Artifact caused by vicinity of sub-pixels (lighter line)

また、LCD 画面 (rgb) の典型的なピクセル配置を示す画像も作成しました。

サブピクセル アーティファクト

最初のトランジションで、青からオレンジに変わるときに、緑のサブピクセルに続いて青と赤のサブピクセルがあり、これらは比較的近接しています。私たちの目はこれを白く認識します。

右側 (オレンジからブルーへの 2 番目の遷移) は、暗い色の錯覚を与えるギャップを示しています。

モバイル デバイスに関する注意事項

通常、携帯端末のほとんどの Web ページは拡大縮小されているため、この影響はあまり目立ちません (画像の再サンプリングによる)。考慮すべきもう1つの側面は、画面の向きを変更できるため、さまざまな方向にアーティファクトが作成される可能性があることです.

この効果を利用して滑らかなテキストをレンダリングする方法に興味がある場合は、ウィキペディアの次の記事を読み続けることができます:ウィキペディア

これが最近の画面の仕組みです。（デザインを変更しない限り）どうすることもできません

于 2013-04-05T17:58:01.517 に答える
2

白い線が見える場合は、モニターの欠陥または目の錯覚です。これはクロムからの拡大されたスクリーンショットです。展開されたセクションではっきりとわかるように、明るいピクセルの列はありません。

スクリーンショット

試行錯誤の結果、このスタイルを適用することでモニター上の錯覚をなくすことができることがわかりました。

.nav-bar>li#active>a{ border-left: rgb(146, 108, 66) 1px solid; }

左端に 1 ピクセル暗いオレンジを作成し、最終的にこのようになります。それを拡大すると、元のものよりも著しく悪化してしまいます。

ここに画像の説明を入力

于 2013-04-05T17:54:18.023 に答える