当前位置：首页 → 问答吧 → 问一个css精灵图片定位的问题

问一个css精灵图片定位的问题

时间：2011-10-03

来源：互联网

做了一张两个上下箭头的合成图,如图,第一个li是向下箭头,第二个是向上箭头,现在我想把两个小图标放在文字后面,我要怎么处理?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> *{margin:0;padding:0;} li{width:100px;border:1px solid #000;margin-top:20px;} li span{padding-left:10px;} li span.a{ background-image:url(images/csg-4e898d63dd622.png); background-position:0 0; background-repeat:no-repeat;} li span.b{background-image:url(images/csg-4e898d63dd622.png); background-position:0 -20px; background-repeat:no-repeat;} </style> </head> <body> <li><span class="a">1234</span></li> <li><span class="b">5678</span></li> </body> </html>
提示：您可以先修改部分代码再运行

作者: minerchow 发布时间: 2011-10-03

分成两个元素。。然后FLOAT right

我是这样想的。。

作者: bluekee 发布时间: 2011-10-03

我也想过这个方法,但是这样还会遇到一个问题,如果需要精确定位,内联元素的垂直方向的margin不会起作用

作者: minerchow 发布时间: 2011-10-03

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">  </style> </head> <body> <li><span class="a">1234</span></li> <li><span class="b">5678</span></li> </body> </html>
提示：您可以先修改部分代码再运行

作者: zhengmingming 发布时间: 2011-10-03

背景图片你看不到的不过代码你应该能看的懂的吧，我想应该就是这样。

作者: zhengmingming 发布时间: 2011-10-03

有一个地方不明白,这里background-position:right top是将图片定位到1右上方,那么我怎么选择css sprites合成图片中的其中一张(我将上下箭头图片合成到一张图片中,向上箭头位置在整张图片中的0,0 向下箭头在整张图片0,-20px的位置)

作者: minerchow 发布时间: 2011-10-03