css：list-style-image中的图片背景如何设置？-css教程-PHP中文网

css：list-style-image中的图片背景如何设置？

黄舟

发布： 2017-06-29 10:28:49

原创

3005人浏览过

如图，左边的项目符号是图片做的，现在错位了。怎么设置图片的边距啊？

不用list-style-image 这个属性
用background: url(1.png) no-repeat 74px;

呵呵的确是用错了属性哦，用li背景或者是 li a的背景来模拟list-type-image更好一些了，起码定位没有那么困难

嗯。以前没怎么用list-type-image，以为它有定位的功能呢。现在看来还是不行。

Adobe Image Background Remover

Adobe推出的图片背景移除工具

查看详情

立即学习“前端免费学习笔记（深入）”；

有没有可能让背景图片的文件名逐个累加：

例如有10个LI，背景图片分别从icon1.gif 到 icon10.gif，这些背景图片都是要在li前面显示。能不能只定义一个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.把图片作为ul的背景，间距+图片高度=li的line-height。坏处：你得保证li不折行。
2.用js判断出现的第几个li，分别赋予对应background-position:*px;里“*”的值。
--------------------
好处：图片只需去服务器上请求一次，这点对大站点来说，是非常重要的。

以上就是 css：list-style-image中的图片背景如何设置？的详细内容，更多请关注php中文网其它相关文章！