아이콘 배경처리해서 큰이미지 잘라보여주기

아이콘 배경처리해서 큰이미지 잘라보여주기

이미지 한개에 여러개의 아이콘을 넣어놓고 원하는 영역만 보여줄때 아래와 같은 스타일을 이용할 수 있다.

.samplebox {

    display:block;

    overflow:hidden;

    position:absolute;

    top:50%;

    z-index:9;

    width:53px;

    height:51px;

    margin:-26px 0 0;

    background:url("/images/sample-ico1.png") 0 -23px no-repeat;

    text-indent:100%;

    white-space:nowrap;

    cursor:pointer;

}

.samplebox { //-> 클래스 선언 (ID)도 무관

    display:block; //=> block화 해서 영역을 확보한다. 

    overflow:hidden;  //=> 레이어영역을 벗어난 경우 감추기

    position:absolute; //=> 위치는 절대값

    top:50%; //=> 위에서 50% 위체

    z-index:9; //=> 레이어가 여러개인 경우 숫자가 클수 록 위에 보인다.

    width:53px;  //=> 가로길이

    height:51px;  //=> 세로길이

    margin:-26px 0 0;   //=>레이어 바깥여백설정

    background:url("/images/sample-ico1.png") 0 -23px no-repeat;   //=> ** 여기가 포인트,보여줄 이미지를 배경처리하고, 원하는 영역에 위치하게 한다. 

    text-indent:100%;   //=> 들여쓰기, 100%

    white-space:nowrap;   //=> 줄바꿈안함

    cursor:pointer;  //=> 마우스커서는 손모양으로..

}