이미지 스프라이트 - 정확한 영역을 선택하고 원하는 위치에 배치하는 방법

Question

나는 배경에서 사용되는 이미지 스프라이트를 만지작 거리다.

이미지의 두 부분을 선택한 다음 왼쪽 하단과 오른쪽 상단에있는 신체 배경의 다른 위치에 배치해야합니다.

내가 1700 픽셀 너비와 1100 픽셀 높이 인 사각형 이미지가 있다고 가정 해 보겠습니다. 이것은 내 이미지 스프라이트입니다.

스프라이트의 오른쪽 상단에서 600px 너비와 400px 높이의 이미지 스프라이트에서 직사각형 모양의 영역을 선택해야합니다. 이 부분을 배경 요소의 오른쪽 상단에 배치해야합니다.

다음으로 이미지 스프라이트의 왼쪽 하단 부분을 선택해야합니다. 이미지 스프라이트는 너비가 600px이고 높이가 400px입니다. 이 부분을 배경 이미지로 신체의 오른쪽 하단에 배치해야합니다. (전 :/후) : 블록 및 내용 :

#area { 
    position: relative; /*by relatively positioning the element it acts as the reference point when absolutely positioning the pseudo-elements*/ 
    z-index:1; /*positive z-index will allow for the correct z-axis positioning of the pseudo-elements*/ 
    /*you could set any background you want, your 2 background images will be in :before and :after*/ 
} 
#area:before,#area:after { 
    position: absolute; /*we want to position them*/ 
    z-index: -1; /*_back_ground-images... so they are behind #area*/ 
} 
#area:before { 
    /*set width, height, the 1st background-image, ... here*/ 
} 
#area:after { 
    /*set width, height, the 2nd background-image, ... here*/ 
} 

는 표시를 추가 할 수 있습니다 당신이 의사 요소를 추가해야합니다 있도록 AFAIK

Answer 1

만, 요소마다 1 개 개의 배경 이미지를 설정할 수 있습니다 "" 귀하의 의사 요소에, 그래서 그들은 생략하지 마십시오

EDIT : CSS 백그라운드 스프라이트의 기초를 알고 있다고 가정합니다. 그 밖의 모든 것들은 이제 완료되었습니다.)