정보실

웹학교

정보실

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

본문

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


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


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


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


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


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





  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

페이지 정보

조회 6회 ]  작성일19-10-10 20:21
CSS

웹학교