background 取图片局部的问题

[NIJIA72]

网易邮箱里, 所有小图标, 都放在一张大的png图上的, 这样能减少http请求次数
图片也好管理, 不用为每个小图去命名太麻烦
所以我也学他的样
有图如下

CSS样式
ul li{ background:url(../../images/icons.gif) 0px -20px no-repeat; text-indent:20px;}
我希望的效果是

可实际效果是


作为背景, 能不能取大图中间一部分的?请高手帮忙

[zw87804600]

不会 只能学习

[zhangleifly]

图片本身设计的就不对啊～！～

[糖小福]

可以的啊..背景的座标

[格桑]

竖排....

[NIJIA72]

ddddddddddddddddddddddddddd

[hibin101]

上面加一层div 样式设置：width:10px;height:10px;overflow:hidden;
控制img左右移动，那样只能看见img中的10px的大小，10px只是例子，根据你的小图标设置

[holyss]

图片尽量都竖排啊，不要横排。

[孟子E章]

图片竖排或者设置元素的宽度只能是一个图片的大小，不能使用li等块级元素

[孟子E章]

你可以放在span里面

[nextuntil]

css sprites技术乐

找好需要部分的坐标就好勒

[籽沫]

[Quote=引用 5 楼 net_lover 的回复:]

你可以放在span里面
[/Quote]

顶

楼主你可以这样写啊：

<ul>
     <li><span>2010-06-17</span><strong></strong><a href="#">口袋精灵</a><span>双线</span></li>
     <li><span>2010-06-17</span><strong></strong><a href="#">口袋精灵</a><span>双线</span></li>
     <li><span>2010-06-17</span><strong></strong><a href="#">口袋精灵</a><span>双线</span></li>
</ul>

CSS

ul li strong{ background:url(../../images/icons.gif) 0px -20px no-repeat;width:15px;}
ul li {text-indent:20px;}

[籽沫]

用个多余的内联元素去固定它的宽度或者高度去截断

[夜雨_Jason]

像这种放置在LI里的图标，尽量是竖排，而且放在右边

[happyshibing]

之前我也出现这样的情况，你可以控制图片的间距，图片不要全部上下左右对齐排列，可以交叉排列。比如：

1 3 5 7 9

2 4 6 8 10

1 3 5 7 9
像这样的排列方式。。这样定位的时候，宽度必须大于图片之前的间距及高度才有可能把其他图片显示出来，一般像图标这么做的话是不会把其他图片显示出来的。。

[starwu]

可以把所有的图标都竖排,
可以看看我的CSS Sprites
http://www.eistudy.com
http://www.eistudy.com/style.css
做两个背景图片,一个是横的背景和竖着的背景
http://www.eistudy.com/img/bgX.gif
http://www.eistudy.com/img/bgY.gif

[cs5276]

因为你要显示的信息是竖排的，所以背景图应该也是竖排的。

因为你无法给li指定那么短的宽度，所以背景图无法被截断。