CSS와 스프라이트가있는 배경 크기

Question

나는 목록이 있으며 각각 <li>에는 아이콘과 텍스트가 있습니다.

아이콘의 이미지는 스프라이트 이미지이므로 아이콘의 크기는 li 인 background-size으로 설정해야합니다.

어떻게하면 CSS로 할 수 있습니까?

Answer 1

당신은 background-size: 32px 32px; 같은 CSS3에서 배경 이미지의 크기를 설정할 수 있지만 정말 크로스 브라우저 호환되지 않습니다 내가 그 우려가 무엇인지 추측 :

여기에 편리한 튜토리얼입니다.

스프라이트가 잘 정렬되어 있고 수직이 아니면 않는 한, 약간의 추가 마크 업을 사용하는 것이 좋습니다. 예를 들어,

<li><span class="ico"></span>This is an li element.</li> 

과 스타일 적절한 높이와 배경 이미지 스프라이트와 span 요소 같은 마크 업을 사용합니다. 이 방법을 사용하면 li 요소에 높이가있을 수 있으며 Sprite가 얼마나 밀집되어 있더라도 적절한 아이콘 만 표시됩니다.

Answer 2

높이를 설정해야합니다. background-repeat of LI와 패딩. preview.moveable.com/JM/ilovelists

Answer 3

다음은 예입니다. 스왑을 스프라이트를 밝은 회색 영역에 놓으십시오. http://jsfiddle.net/Pf7Xs/

이 질문은 귀하가 요청한 것입니까? 스프라이트 영역과 텍스트가 같은 크기의 <li> 안에 있습니까?

대부분 원하는대로 줄이기 위해 line-height과 height을 사용하게됩니다. 도움이되는 희망은 입니다.

Answer 4

아이콘이있는 목록과 같이 텍스트를 지원하는 이미지의 경우 CSS 유사 요소를 사용하는 것이 좋습니다. before 또는 : after. 이렇게하면 HTML이 깨끗하게 유지됩니다.

<ul> 
    <li>List Item</li> 
    <li>List Item</li> 
</ul> 

li:before 
{ 
    content: ""; 
    width: 1em; 
    height: 1em; 
    background: url("image.png") -12px -12px no-repeat transparent; 
    display: inline-block; 
} 

이 기술에 대한 자세한 내용은 http://css-tricks.com/을 참조하십시오.