CSS: 목록 스타일 이미지에서 이미지 배경을 설정하는 방법은 무엇입니까?

사진과 같이 왼쪽의 총알은 사진으로 만든 것인데 지금은 위치가 잘못되어 있습니다. 이미지의 여백을 어떻게 설정하나요?

list-style-image를 사용하지 마세요. 이 속성은
사용 Background: url(1.png) no-repeat 74px;

하하, 정말 잘못된 속성입니다. li 배경을 사용하거나 li a 목록형 이미지를 배경과 함께 시뮬레이션하는 것이 더 낫습니다. 최소한 위치 지정은 그렇게 어렵지 않습니다

흠. 이전에는 list-type-image를 많이 사용하지 않았는데 위치 지정 기능이 있다고 생각했습니다. 지금도 작동하지 않는 것 같습니다.

배경 이미지의 파일명을 하나씩 쌓아도 되나요?

예를 들어 LI가 10개 있고, 배경 이미지는 각각 icon1.gif부터 icon10.gif까지 앞에 표시되어야 합니다. 리의. CSS만 정의하면 구현할 수 있나요? 10개의 호출을 하나씩 정의해야 합니까?

/*-----------------------------------.top10-----------------------------------*/
#top10 li {
        line-height:160%;
        padding-left:24px;
        border-bottom:1px #ccc dashed;
        width:150px;
        overflow:hidden;
}
#top10 a:hover {
    color:#C90;
}
#top10 .top1 {
        background:url(images/top_1.gif) no-repeat left center;
}
#top10 .top1 a {
    color:#06f;
}
#top10 .top1 a:hover {
    color:#f60;
}
#top10 .top2 {
        background:url(images/top_2.gif) no-repeat left center;
}
#top10 .top2 a {
    color:#06f;
}
#top10 .top2 a:hover {
    color:#f60;
}
#top10 .top3 {
    background:url(images/top_3.gif) no-repeat left center;
}
#top10 .top3 a {
    color:#0066FF;
}
#top10 .top3 a:hover {
    color:#f60;
}
#top10 .top4 {
    background:url(images/top_4.gif) no-repeat left center;
}
#top10 .top5 {
    background:url(images/top_5.gif) no-repeat left center;
}
#top10 .top6 {
    background:url(images/top_6.gif) no-repeat left center;
}
#top10 .top7 {
    background:url(images/top_7.gif) no-repeat left center;
}
#top10 .top8 {
    background:url(images/top_8.gif) no-repeat left center;
}
#top10 .top9 {
    background:url(images/top_9.gif) no-repeat left center;
}
#top10 .top10 {
    background:url(images/top_10.gif) no-repeat left center;
}

하나씩 정의해야 한다면 먼저 10개의 그림을 세로줄로 연결하여 그림을 만드세요--->
방법은 두 가지가 있습니다.
1. 그림을 배경으로 사용하세요. 간격 + 그림 높이 = li의 줄 높이. 단점: 돈을 들이지 않도록 주의해야 합니다.
2. js를 사용하여 어떤 li가 나타나는지 확인하고 배경 위치:*px;에 해당하는 "*" 값을 할당합니다.
------------
이점: 이미지는 서버에서 한 번만 요청하면 되며 이는 대규모 사이트에 매우 중요합니다.

위 내용은 CSS: 목록 스타일 이미지에서 이미지 배경을 설정하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!