분류
css
CSS를 사용하여 요소와 이미지의 색상을 반전 시키는 방법
본문
나는 이 문제가 있었습니다. 페이지에 "흰색 바탕에 검은 색"이미지를 추가했습니다. 어두운 모드에서는 페이지가 배경을 검은 색으로 올바르게 변경하지만 이미지는 검은 색으로 흰색으로 유지됩니다.
https://flaviocopes.com/css-invert-colors/
그래서 이 규칙을 CSS에 추가하여 어두운 모드를 감지하고 이미지 색상을 자동으로 반전 시킵니다.
@media (prefers-color-scheme: dark) {
.my-image {
filter: invert(100%);
}
}
어두운 배경색이 완벽하게 검은 색이 아니기 때문에 100 % 정확하지는 않습니다.
일을 완벽하게 하기 위해 HTML의 img 태그 대신 CSS 배경 이미지를 사용하여 이미지를 추가 할 수도 있으며 어두운 모드에서 쉽게 바꿀 수 있습니다.
- 이전글Axios를 사용하여 urlencoded 데이터를 전송하는 방법 19.10.10
- 다음글자바 스크립트 퀴즈 질문 및 설명 19.10.10