HTML의 명암 모드 이미지

당신은 사용자가 좋아하는 배색 방안에 따라 그림을 변경할 수 있다는 것을 알고 있습니까?
이 예쁜 코드는 CSS 에서 사용할 수 있지만, HTML 에서 직접 작동하는 것을 아십니까?
우리는 사용자가 짙은 색이나 연한 색 모드를 좋아하는지 확인하고 이를 바탕으로 다른 이미지를 표시할 수 있습니다!
다음과 같이 표시됩니다.

HTML 구조

<picture>
  <source srcset="dark-mode.png" media="(prefers-color-scheme: dark)">
  <img src="light-image.png">
</picture>

그렇습니다!
기본적으로 연한 색상 이미지는 표시되지만 사용자가 진한 색상 체계를 좋아하는 경우 짙은 색상 이미지가 표시됩니다.
코펜에서 이거 할 수 있어.

브라우저 지원

첫 번째 색 배열 방안에 대한 지원은 갈수록 좋아지고 있지만, 여전히 믿을 만한 선택은 아니다.

읽어주셔서 감사합니다. 연결합시다!

제 블로그를 읽어 주셔서 감사합니다.내 이메일 시사 통신을 구독하고 Facebook 또는