带有CSS背景的样式<li>元素，仅显示部分图像</li>

Question

任何人都可以帮我列表。

我有一张图片：

现在我需要构建列表，默认公牛用左侧箭头替换（但不是用整个图像）：

如何使用跨浏览器css实现它？

我的HTML标记是：

<ul>
    <li><a href="#">Conveniently located on Adelaide St. W, one block east of the Bathurst   and Adelaide intersection, just north of the Gardiner Expressway, downtown Toronto.</a></li>
    <li>All units are located indoors, which means they are all climate controlled.</li>
    <li>There is an indoor loading dock with four bays, two of which are large enough to accommodate up to 50' trailers.</li>
    <li>Complimentary use of on-site dollies and pallet truck.</li>
</ul>

Answer 1

请参阅有关使用带有列表样式背景的Sprite图像的问题：

use CSS sprites for list (<li>) background image

Answer 2

我想这就是你要求的。

查看此fiddle

这是代码

HTML 是相同的。

CSS

ul {
    list-style: disc inside none;
}

ul li:before {
    position: absolute;
    content: "";
    left: 8px;
    background: url('http://i.stack.imgur.com/KKMcz.png') no-repeat #fff;
    width: 8px;
    height: 14px;
}

Answer 3

你需要设置

background: transparent, url(/image/sprite.png) no-repeat -XXpx -XXpx;  

-XXpx移动元素的位置。唯一的问题是你必须确保子弹显示的li上的填充不是太宽，只显示你想要的图像大小。

你有另一个选择是设置list-style-type：none;然后在你想要拥有图像的元素的开头放一个div或span。我不推荐这个，但它会起作用，

Answer 4

ul {
     list-style-image: url(/xxx/xxx.gif);
}

会给你整个图像，你能不能将图像分割成中间并使用左边的部分？

Answer 5

这是另一种应该跨浏览器的方法。但是，您需要更改精灵图像。 （我似乎无法使用Photoshop或GIMP或任何其他东西打开图像而不会弄乱它。你必须自己解决它。）（已修复）

Demo

基本上它垂直偏移另一个图像而不是水平偏移。如果您有更长的列表，则必须修改垂直偏移的距离。这适用于所有浏览器，我在IE9中测试了它，兼容性设置已更改。它甚至可以在夸克模式下工作。

修改后的图片如下所示：