HTML 클립 속성을 사용하는 이미지 글 머리 기호 목록

Question

클립 속성을 사용하여 이미지 글 머리 기호로 HTML 목록을 만들 수 있습니까? 나는 그것을 작동 시키려고 노력하고 있었지만 나는 올바르게 할 수 없었습니다.

감사합니다.

<div class="my-clip-list"> 
<ul> 
    <li class="one">One</li> 
    <li class="two">Two</li> 
    <li class="three">Three</li> 
</ul> 
</div> 

그리고 내 초기 CSS :

은 여기 내 초기 HTML 코드

.my-clip-list {position: relative;} 
.my-clip-list ul {position: absolute;} 
.my-clip-list ul li {line-height: 24px; content:url([url_of_sprite]);} 
.my-clip-list ul li.one {clip: rect(top right bottom left)} 
.my-clip-list ul li.two {clip: rect(top right bottom left)} 
.my-clip-list ul li.three {clip: rect(top right bottom left)} 

내가 이런 짓을했지만, 제대로 동작하지 않습니다. 사실 실제 CSS 값을 가지고있는 클립 속성의 일반 정보를 넣었습니다. 이것은 내가하는 일을 설명하기위한 것입니다.

가능한 경우 친절하게 도와주세요.

감사합니다.

Answer 1

리튬 항목 자체가 "절대적인"위치에 있지 않을 수 있습니까, 그냥 UL입니까? 그냥 설명서/참고 문헌에서 추측.