При использовании темы высокой контрастности в Windows 10 Firefox может использовать эту настройку, и я нахожу ее очень полезной функцией, поскольку я могу задать цвет фона глобально. Но в Firefox есть некоторые проблемы с изображениями. А именно, некоторые изображения на некоторых сайтах просто исчезли. Я подозреваю, что эти проблемы связаны только с графикой SVG, потому что растровые изображения, похоже, везде в порядке.
Например, на сайтах SE теперь отсутствуют иконки:
Что изначально было:
Это действительно разочаровывает.
Есть ли решение этой проблемы?
Я потратил некоторое время на поиск этой проблемы в Google и перепроверил некоторые системные настройки Windows, но ничего не помогает. Примечание: я не хочу отключать эту функцию, она мне нравится, и я просто хочу решить упомянутую проблему.
решение1
Проблема вызвана тем, что редактор stackexchange использует фоновые изображения для своих иконок. В режиме высокой контрастности все фоновые изображения удаляются. Единственный способ обойти это — использовать запрос @media (для высокой контрастности) и/или вместо свойства фона использовать свойство content.
[element]:after {content: url([image url]);} Это само по себе позволит отобразить изображение. Оно не сделает его видимым для всех пользователей, если только коэффициент контрастности не будет достаточно высоким по сравнению с фоном.
.wmd-button > span**:after** { содержание:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); размер фона: начальный !важно;
Следующий код будет работать в Windows (Edge и IE11) для предоставления пользовательских цветных кнопок, которые будут работать в режиме высокой контрастности (активный, черный на белом, белый на черном):
@media screen и (-ms-high-contrast:active){ .wmd-button > span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); background-size: initial !important; } }