
Windows 10 で高コントラスト テーマを使用する場合、Firefox はこの設定を使用できます。背景色をグローバルに設定できるため、非常に便利な機能だと思います。ただし、Firefox の画像には問題があります。つまり、一部のサイトで一部の画像が消えてしまいます。ラスター画像はどこでも問題ないように見えるため、これらの問題は SVG グラフィックにのみあると思われます。
たとえば、SE サイトには次のようなアイコンがありません。
元々は:
本当に残念です。
この問題の解決策はありますか?
この問題について Google で調べ、Windows システム設定を再確認しましたが、何も役に立ちませんでした。注: この機能を無効にするつもりはありません。気に入っており、言及されている問題を解決したいだけです。
答え1
この問題は、stackexchange エディターがアイコンに背景画像を使用しているために発生します。高コントラスト モードでは、すべての背景画像が削除されます。これを回避する唯一の方法は、@media クエリ (高コントラスト用) を使用するか、背景プロパティの代わりにコンテンツ プロパティを使用することです。
[element]:after {content: url([image url]);} これだけで画像が表示されます。背景とのコントラスト比が十分に高くなければ、すべてのユーザーに見えるようにはなりません。
.wmd-button > span**:after** { コンテンツ:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); 背景サイズ: initial !important;
次のコードは Windows (Edge および IE11) で動作し、高コントラスト (アクティブ、白地に黒、黒地に白) で動作するカスタム カラー ボタンを提供します。
@media screen and (-ms-high-contrast:active){ .wmd-button > span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); background-size: initial !important; } }