어쩌면 배경 능력이 있습니까?

Jake의 기사는 "현재 두 개의 DOM 요소를 교차 페이드 할 수 없다"는 요소가 진정으로 교차로가 될 수없는 심층적 인 이유를 탐구 하며이 기사는 매우 흥미 롭습니다. 두 요소의 불투명도는 애니메이션이 될 수 있지만 이것은 실제 교차 사전 효과가 아닙니다. Chrome/WebKit의 고유 한 CSS 기능 -webkit-cross-fade() 가이 효과를 달성 할 수 있음이 밝혀졌습니다. MDN 문서는 기능이 정규화되었지만 구현 버전간에 차이가 있으므로 약간 혼란 스럽지만 존재합니다.

 .el {
  배경 : -webkit-cross-fade (url (img1.svg), url (img2.svg), 50%);
}

나는이 기능이 있다는 것을 몰랐다.

내 마음에 오는 첫 번째는 이미지 중 하나가 투명한 빈 이미지라면 다른 이미지에 부분 투명성이 적용됩니까? 따라서 background-opacity 에 대한 대안으로 사용될 수 있습니다 ( background-opacity 존재하지 않지만 존재해야한다고 생각합니다).

나는 그것이 작동하는지 확인하기 위해 시험을했다.

테스트 결과는 유효합니다! 핵심 코드는 다음과 같습니다.

 .el {
  배경 이미지 : -webkit-cross-fade (
    URL (image.jpg),
    url(data:image/gif; base64,R0lGODlhAQABAIAAAAAAAAAAP///yH5BAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA7),
    50%
  );
}

이것은 Base64 인코딩 된 1 픽셀 투명 GIF 이미지입니다.

이 방법은 Firefox에서는 작동하지 않지만 다른 브라우저에서 작동합니다. 또한 브라우저 지원은 CSS에서 직접 테스트 할 수 있으며 지원되지 않을 때는 다른 방법을 사용할 수 있습니다.

 @supports (배경 : -webkit-cross-fade (url (), url (), 50%)) {
  /*이 방법을 지원할 때만이 방법을 적용하면 Firefox 대안 이이 외부에 있습니다*/
}

위의 코드는 이미 데모에 포함되어 있습니다.

위 내용은 어쩌면 배경 능력이 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!