css 배경아이콘 sprite 이미지로 적용하기

네비게이션 가변 컨텐츠에 들어갈 아이콘이미지를 배경으로 넣어주자!

빨간 박스 부분에 공통클래스로 삽입 

 

---

1. sprite 이미지 준비

한장에 모든 아이콘 이미지가 들어가있는 sprite 이미지 준비

---

2. 삽입될 자리에 background로 이미지 지정

 

.board_pagination_wrap .btn_paging:before{
    content: '';
    width: 14px;
    height: 14px;
    border: 1px solid red;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: url(../images/sprite_pc.png) no-repeat;
}

공통클래스로 준비된 자리 (빨간박스) 에 마지막으로 background: url 로 이미지 경로를 지정해준다. 

 

---

3. spritecow 사이트에 이미지 올리기

sprite 이미지에서 각각 아이콘의 좌표를 찾을 수 있는 사이트를 이용 

 

 

http://www.spritecow.com/

Sprite Cow - Generate CSS for sprite sheets

 

 

 

 이미지 업로드 후 

원하는 아이콘을 찍으면

아래 좌표를 얻을 수 있다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

---

3. css로 지정

 

btn_paging first , btn_paging prev

등 html 에서 지정해줬던 class 명을 뒷글자만 지정해 배경을 넣어준다.
(앞의 이름은 자리 지정하는데 공통클래스로 사용)

 

.board_pagination_wrap .first:before {
    background-position: -397px -310px;
}
.board_pagination_wrap .prev:before {
    background-position: -369px -182px;
}
.board_pagination_wrap .next:before {
    background-position: -30px -431px;
}
.board_pagination_wrap .last:before {
    background-position: -443px -388px;
}

 

부모영역에 background로 이미지가 설정 되어있기 때문에 

background-position으로 좌표만 설정 해주면 끗!