배경이미지와 그라데이션을 동시에 사용하는 CSS

버튼에 그라데이션과 자그마한 아이콘을 동시에 사용하고자 할 경우에는 다음과 같이 BackGround속성을 동시에 나열하면 가능하다.

background: url("이미지주소") no-repeat 10% 50%, -webkit-gradient(linear, left top, left bottom, from(#시작색상값), to(#끝색상값));

위 빨간색 글씨가 중요한 부분이며, no-repeat(이미지를 한번만 그림) 다음의 10% 50%는 각각 해당 버튼을 기준으로 이미지를 위치시키고 싶은 x, y 좌표값이다.

이미지 아이콘을 한장에 합쳐서 ( 용량 엑서스 문제 해결을 위해 최근에는 enable, hover, active, disable 4가지 경우의 이미지를 한장의 이미지 파일에 가로 혹은 세로로 붙여서 관리한다 . 혹은 모든 아이콘을 한장에 다 때려 합쳐서 꺼내쓰는 경우도.) 사용하는 경우에는 이야기가 달라진다. 

즉, 이미지 아이콘이 한장에 합쳐져 있는 경우에는 해당 이미지에서 꺼내쓰고자 하는 아이콘의 위치값을 적어주어야 하는데, 이경우 직접 만든 이미지 파일이 아닌 이상 값을 찾기가 까다롭다. 

방법은 left, top, right, bottom 등을 통해 해당 이미지에서 각 방향을 기준으로 어느 위치에 있는지를 지정해주어야 한다. 

다만, 이미지 파일내의 아이콘 위치를 좌표로 가져오다 보면, 정작 버튼내에서 그 꺼내온 아이콘이 어디에 위치해야 할지까지 또 명시를 해야 하는데 만만치가 않다....oh my god..