Wulin.com의 기사 소개 (www.vevb.com) : 때때로 Sprite 및 Elf Picture라고 불리는 CSS Sprite는 모든 프론트 엔드 오프닝이 발생하는 문제이며 작은 그림 로딩 최적화의 일반적인 방법입니다. 나는 모든 학생들이 원칙을 알고 있다고 생각하므로 자세한 내용을 보지 못할 것입니다.
때때로 Sprite 및 Sprite라고 불리는 CSS Sprite는 모든 프론트 엔드가 열리는 문제이며 작은 그림 로딩 최적화의 일반적인 방법입니다. 나는 모든 학생들이 원칙을 알고 있다고 생각하므로 자세한 내용을 보지 못할 것입니다.
나는 항상 HTML5를 사용하여 Sprite Pictures를 합성하는 도구를 실현하여 소규모 프로젝트의 빠른 개발을 용이하게하고 Photoshop 열기, 불꽃 놀이 및 사진을 결합하는 기타 도구와 같은 기계적 노동을 줄입니다. 최근에, 나는 마침내 그것을 생각하고 구현하는 데 시간이 걸렸습니다.
이동! PNG 소개 :현재 기능은 다음과 같습니다.
사용 지침 : 1. 작은 그림 파일을 아래와 같이 조작 영역으로 드래그 앤 삭제하십시오. 2. 아래 그림과 같이 입력 클래스 속성 설정 및 대상 이미지 및 CSS 파일 생성 3. CSS 템플릿을 변경하여 생성 된 CSS 파일을 사용자 정의 할 수 있습니다.사용 된 템플릿 함수는 John Resig의 마이크로 템플릿입니다.
사용할 수있는 변수는 다음과 같습니다.
x, y, w 및 h의 설명은 다음과 같습니다.
CSS 템플릿의 설정은 다음과 같습니다.
4. 대상 이미지 및 CSS를 생성 한 후 직접 다운로드 할 수 있습니다.다운로드 버튼을 클릭하여 다운로드를 완료하십시오.
5. 작업 상태 수출이 기능은 그림 데이터 (그림, 그림 위치 배열), 매개 변수 설정 (홈페이지 매개 변수 설정 및 CSS 템플릿 설정 포함)을 포함하여 현재 작업 상태를 하나의 파일로 내보낼 수 있으며이 파일을 사용하여 다음에 작업 상태를 복원 할 수 있습니다.
다음 그림을 내 보냅니다.
다음 그림을 가져옵니다.
복원 할 수 있습니다 :