자바스크립트에 의존하지 않고 이미지 세트를 사용하여 대체 배경 이미지 구현

Question

저는 프런트 엔드와 CSS를 처음 접했습니다. background-image，如果支持 .avif 文件，则加载这些文件。否则回退到 .png 文件。我想知道是否可以在没有 javascript 的情况下执行此操作，并且无需加载所有图像而不影响页面速度。我在（大部分）模拟器中运行 Chrome 107.0.5304.110、ios 16.1 （我知道旧版本的 ios 不支持 avif，但最新版本支持。希望能同时使用两者）和 Firefox 106.0.1를 추가하려고 합니다.

1번 시도하기 이전 답변을 따르세요. webkit-image-set 사용법에 주의하세요. 내 코드는 다음과 같습니다.

으아아아

Chrome 및 Firefox에서는 작동하지만 iOS의 Safari에서는 회색 이미지가 표시됩니다.

2번 시도해 보세요. 이 블로그의 답변을 따르세요. 여기서는 image-set가 사용되었습니다. 코드:

으아아아

이는 세 가지 브라우저 모두에서 볼 수 있지만 항상 png로 표시됩니다. 또한 이미지 세트의 위치를 ​​반대로 했지만 동일한 결과를 얻었습니다. 항상 png.

3번째 시도, 2번째 시도와 약간 다릅니다. 방금 첫 번째 줄의 형식을 변경했습니다.

으아아아

Chrome/Firefox에서는 잘 작동하지만 iOS에서는 회색으로 표시됩니다.

이 문제를 해결할 방법이 있나요? 감사해요!

Answer 1

으아아아