css: list-style-image で画像の背景を設定するにはどうすればよいですか?

写真に示すように、左側の箇条書きは写真から作られていますが、現在は配置が間違っています。画像の余白を設定するにはどうすればよいですか?

この属性は使用しないでくださいlist-style-imageこの属性
Use background: url(1.png) no-repeat 74px;

はは、それは確かに間違った属性です。背景を使用するか、 li a 背景付きのリスト型画像をシミュレートする方が良いです。少なくとも配置はそれほど難しくありません

うーん。 list-type-image には位置決め機能があると思って、これまであまり使ったことがありませんでした。今でもまだ機能していないようです。

背景画像のファイル名を1つずつ蓄積することは可能ですか:

例えば、LIが10個あり、背景画像がそれぞれicon1.gifからicon10.gifまである場合、これらの背景画像を前面に表示する必要があります。李の。 CSSを定義するだけで実装できるのでしょうか？ 10 個の呼び出しを 1 つずつ定義する必要がありますか?

/*-----------------------------------.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;
}

1 つずつ定義する必要がある場合は、まず 10 枚の写真を縦につなげて写真を作成します---->
2 つの方法があります:
1. 写真を ul の背景として使用します。間隔 + 画像の高さ = li の行の高さ。短所: 破産しないように注意する必要があります。
2. js を使用してどの li が表示されるかを決定し、b​​ackground-position:*px; に対応する「*」の値を割り当てます。
------------------------
利点: サーバーに画像をリクエストする必要があるのは 1 回だけです。これは大規模なサイトにとって非常に重要です。

以上がcss: list-style-image で画像の背景を設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。