목록의 총알 이미지로 아이콘 행렬 (약 16 x 16 아이콘) 중 하나의 아이콘을 사용하고 싶습니다. background-position으로 배경 이미지를 배치하고 반복 할 수 있습니다 : norepeat. 그러나 이것은 행렬의 나머지 부분 전체를 표시 할 것이므로 배경 이미지를 잘라내는 방법을 찾고 있습니다. (이 기능을 사용하면 접힌 호버 등의 여러 상태에 대해 내 CSS에 다른 배경 위치 행을 추가 할 수 있습니다.) 반드시 Internet Explorer에서 실행할 필요는 없습니다. 나는 생성 된 컨텐트를 사용하려고했지만 그걸 사용해서는 얻을 수 없다고 생각합니다. 다음 단계 jquery는 텍스트 앞에 span 또는 div를 만들 것이지만 순전히 CSS를 사용하여 해결할 수 있다면 좋을 것입니다.CSS 목록 항목의 행렬에서 단일 아이콘을 표시하는 방법
HTML
<ul>
<li><a href="" title="">link#1</a></li>
</ul>
CSS
li {background: url(sprite.gif) no-repeat 0 0; padding: 0 0 0 16px;}
a {text-transform: uppercase;}
이
li {background: url(sprite.gif) no-repeat 16px -48px; padding: 0 0 0 16px;}
주 3 행의 두번째 아이콘을 표시하려면 : sprite.gif 16 개 아이콘, 각 16x16px, 설정했습니다 16x16 매트릭스
나는 이것이 가능하지 않다고 생각합니다. CSS3은 크기 조정을 허용하지만 자르기는 허용하지 않습니다.
16x16 픽셀 컨테이너에 배경 이미지를 놓아야합니다.
당신은 c < > 태그에 단색 배경과 패딩을 사용하면 사용하지 않는 것을 은폐 할 수 있지만 단점은 아이콘을 클릭 할 수 없다는 것입니다.
전체 li에 대해 bg로 설정 했더라도 다른 아이콘은 표시되지 않도록 스프라이트를 변경할 수 있습니다.
에서 :
| | | |
사람 :
|
|
|
|
대체물은 언급 한 바와 같이 16x16 픽셀 컨테이너를 사용합니다.
"clip"CSS 속성을 살펴볼 수는 있지만 결석 배치 요소에서만 작동하는 것처럼 보이므로 총알이 될 컨테이너를 추가하는 것이 좋습니다. – fantactuka