
Windows 10에서 고대비 테마를 사용할 때 Firefox는 이 설정을 사용할 수 있으며 배경색을 전체적으로 설정할 수 있으므로 매우 유용한 기능이라고 생각합니다. 하지만 Firefox의 이미지에는 몇 가지 문제가 있습니다. 즉, 일부 사이트의 일부 이미지가 사라졌습니다. 래스터 이미지는 어디에서나 괜찮은 것 같기 때문에 이러한 문제는 SVG 그래픽에서만 발생하는 것으로 생각됩니다.
예를 들어 SE 사이트에는 이제 아이콘이 없습니다.
원래는 다음과 같았습니다.
정말 실망스럽습니다.
이 문제에 대한 해결책이 있습니까?
이 문제를 인터넷에서 검색하고 일부 Windows 시스템 설정을 다시 확인했지만 아무 도움이 되지 않았습니다. 참고: 저는 이 기능을 비활성화하고 싶지 않습니다. 이 기능이 마음에 들고 언급된 문제를 해결하고 싶습니다.
답변1
이 문제는 stackexchange 편집기가 아이콘에 배경 이미지를 사용하기 때문에 발생합니다. 고대비 모드에서는 모든 배경 이미지가 제거됩니다. 이를 해결하는 유일한 방법은 @media 쿼리(고대비)를 사용하거나 배경 속성을 사용하는 대신 콘텐츠 속성을 사용하는 것입니다.
[element]:after {content: url([image url]);} 이것만으로도 이미지가 표시될 수 있습니다. 배경과의 명암비가 충분히 높지 않으면 모든 사용자에게 표시되지 않습니다.
.wmd-버튼 > 범위**:이후** { 콘텐츠:url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1"); 배경 크기: 초기 !중요;
다음 코드는 Windows(Edge 및 IE11)에서 고대비(활성, 흰색 바탕에 검정색, 검정색 바탕에 흰색)로 작동하는 사용자 정의 색상 버튼을 제공합니다.
@media 화면 및 (-ms-high-contrast:active){ .wmd-button >span:after { content: url("../../Img/unified/wmd-buttons.svg?v=71f92841a4f1") ; 배경 크기: 초기 !중요; } }