当前位置:Gxlcms > css > css:list-style-image中的图片背景如何设置?

css:list-style-image中的图片背景如何设置?

时间:2021-07-01 10:21:17 帮助过:99人阅读

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

1646.gif

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

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

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

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

例如有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中的图片背景如何设置?的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行