Rumah > Artikel > hujung hadapan web > css:list-style-image中的图片背景如何设置?
如图,左边的项目符号是图片做的,现在错位了。怎么设置图片的边距啊?
不用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;里“*”的值。
--------------------
好处:图片只需去服务器上请求一次,这点对大站点来说,是非常重要的。
Atas ialah kandungan terperinci css:list-style-image中的图片背景如何设置?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!