하나의 png 이미지에서 아이콘 가져 오기

지금까지 여러 번 본 적이 있지만 결코 사용하지 않았습니다. 누군가가 당신이 CSS sprites라고 CSS하나의 png 이미지에서 아이콘 가져 오기

enter image description here

2013-08-12 David Dury

그것은 CSS 스프라이트라고합니다. 이것을 이해하려면 각 아이콘의 너비와 높이를 알아야합니다. –

@Mr_Green 다른 크기의 아이콘이있는 경우에도 똑같은 모양이됩니다. –

아래의 솔루션에 추가하면이 이미지를 만든 디자이너의 도움을받을 수도 있습니다. –

를 사용하여 ... 예를 들어, 하나의 PNG 이미지에서 내가 빨간색으로 선택한 아이콘을 특정 아이콘의 사진을 얻을 수있는 방법을 설명 할 수 있습니다. HTTP 요청을 줄이기 위해 사용됩니다. 예를 들어

.icon1 { 
    background-image: url('YOUR_URL_HERE'); 
    background-position: 10px 10px; /* X and Y */ 
    height: 30px; 
    width: 30px; 
}

Demo

그래서 inshort 단지에 수정 높이/폭을 정의 할 수 있도록 기본적으로 모든 아이콘은 하나의 캔버스에 배치하고 background-image 속성으로 사용되며, 이후 그들은 CSS background-position 속성을 사용하여 매핑됩니다 요소를 추가하고 background-position 속성을 사용하여 캔버스를 매핑하십시오. 따라서 페이지에 100 개의 작은 아이콘 이미지가 있으면 서버에 100 번 요청하여 성능을 높이고 CSS Sprites가 사용됩니다.

출처

2013-08-12 06:31:51

한 가지 질문 : 어떻게 배경 위치를 얻습니까? 네가 옳은 그림을 얻을 때까지 네가 시도해 보는거야? 거기에 기술이나 도구가 있습니까? –

@DavidDury 수동으로 또는 당신은 [스프라이트 생성기] (https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla : en-US : 공식 및 고객 = firefox-a) –

집합 그래서 표시 할 이미지의 일부가 도면에 background-position을 조정 background-image
같은 이미지를 설정 요소
에 height와 width (픽셀) 고정

출처

2013-08-12 06:32:19 Quentin

이미지 위치 지정을 위해 백그라운드 축약어를 사용합니다.

div { 
    background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px; 
    width:27px; 
    height:27px; 
}

http://jsfiddle.net/T2EtY/1/

출처

2013-08-12 07:01:36

하나의 png 이미지에서 아이콘 가져 오기

답변

관련 문제