버튼이 있고 이미지 스프라이트를 사용하여 해당 버튼의 배경으로 이미지를 표시하고 있습니다. 하지만 어떻게하면 배경 이미지의 높이와 너비를 조절할 수 있습니까? 그래서 이미지를 가운데에 배치하고 작게 또는 크게 표시 할 수 있습니다.Image Sprite의 폭과 높이를 줄일 수 있습니까?
내 HTML 버튼은 다음과 같습니다
<input type="button" style="background-image:url(http://s14.postimg.org/cvj2v79gx/csg_539205e53e474.png)" class="sprite-Answer1 callIcons" />
사진을 다운로드하고 사진 편집 프로그램으로 크기를 조정 한 다음 서버 + 상대 URL에 업로드하십시오.
새로운 브라우저에서는 background-size를 사용하여 시도 할 수 있습니다 : 커버 :
background-size : 50% 50%;
가 나는 그것이 쉬운 배경 크기를 사용하여 찾을 수 있습니다. 바이올린에서
, 당신은 배경 스프라이트의 폭이 절반 볼 수 있습니다. 배경 위치를 조정하여 원하는 스프라이트 이미지를 표시해야합니다. ie8 이하의 경우 조건부 스타일 시트와 비침 해 이미지를 추가 할 수 있습니다.<!--[if lt IE 9]><link rel="stylesheet" type="text/css" href="styles-ie.css" /><![endif]-->
IE 스타일에서는 크기 조정 아이콘 만 사용하십시오. 모바일 장치에서 IE를 사용한다고 생각하지 않기 때문에 나쁜 생각을하지 마십시오. 속도가 너무 과격하지 않아야합니다.
배경 크기를 사용하고 결국 백그라운드 위치를 업데이트해야합니다. http://jsfiddle.net/DsXs7/18/ –