분류 css

CSS를 사용하여 요소와 이미지의 색상을 반전 시키는 방법

컨텐츠 정보

  • 조회 1,874 (작성일 )

본문

나는 이 문제가 있었습니다. 페이지에 "흰색 바탕에 검은 색"이미지를 추가했습니다. 어두운 모드에서는 페이지가 배경을 검은 색으로 올바르게 변경하지만 이미지는 검은 색으로 흰색으로 유지됩니다.


https://flaviocopes.com/css-invert-colors/ 


그래서 이 규칙을 CSS에 추가하여 어두운 모드를 감지하고 이미지 색상을 자동으로 반전 시킵니다.


@media (prefers-color-scheme: dark) {
  .my-image {
    filter: invert(100%);
  }
}


어두운 배경색이 완벽하게 검은 색이 아니기 때문에 100 % 정확하지는 않습니다.


일을 완벽하게 하기 위해 HTML의 img 태그 대신 CSS 배경 이미지를 사용하여 이미지를 추가 할 수도 있으며 어두운 모드에서 쉽게 바꿀 수 있습니다.





CSS