어떻게 CSS 스프라이트의 일부분의 크기를 조정할 수 있습니까?

Question

CSS 스프라이트를 사용하여 jQuery의 대화 코드를 개선하고 대화 상자 테두리의 애니메이션을 추가하고 싶습니다.

이렇게하려면 모든 삽화가 1 개의 PNG 파일 인 CSS Sprite에 있어야합니다.

내 문제는 2 또는 3 모니터를 최대화하는 대화 상자를 지원하기 위해 CSS 스프라이트 파일에 5000px 너비/높은 테두리 그래픽을 넣어야한다고 생각합니다. 왜냐하면 나는 부분을 선택하는 방법을 찾을 수 없기 때문에 CSS 스프라이트 이미지의 부분을 선택했다.

기본적으로 스프레이 이미지에서 영역 (t, l, w, h)을 다른 너비와 높이로 내 페이지의 DIV 또는 IMG로 크기를 조정하려고합니다. 알고 싶습니다. 가능한가요? 그것은 백그라운드 포지션이 전혀 지원하지 않는 것 같습니다.

나는 첫 번째 해결책을 How can I scale an image in a CSS sprite에서 시도했지만이를 사용하여 작동하지 못했습니다.

background-position과 함께 새 background-size 속성을 사용해 보았지만 원하는 결과를 얻지 못했습니다.

Answer 1

CSS를 사용하여 몇 시간을 소비했지만 대화 상자에서 작동하도록 스프라이트를 얻을 수 없었습니다.

하지만 내 애니메이션 대화 상자는 실제 프레임을 대화 상자 배경 화면으로 설정하지 않는 한 많은 프레임이 필요하지 않습니다. 따라서 대화 테마의 경우 8 개의 312x312 PNG가 프레임, 8 개의 요청으로 설계되었습니다. , 386kb 합계. 대화 상자가 "강조 표시된"상태 일 때 빛나는 애니메이션을 만들 정도로 충분합니다. 할 수 있어요. 내가 How can I scale an image in a CSS sprite

에서 기술을 사용하고

애니메이션 대화 상자의 오픈 소스 릴리스 한 달에 http://mediabeez.ws를 참조하십시오. 내 자체 개발 CMS에서이 독립 실행 형 구성 요소를 개발하고 테스트 할 예정이므로 해당 기능을 테마로하고 드래그 앤 드롭 등의 작업을 수행 할 수 있습니다.