Html 将 CSS 精灵用于列表 (<li>) 背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2381789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
use CSS sprites for list (<li>) background image
提问by Emmett
Is it possible to use CSS sprites for the list background image? Normally, I render my sprites with CSS like this:
是否可以将 CSS 精灵用于列表背景图像？通常，我使用 CSS 渲染我的精灵，如下所示：
.sprite { background: url(sprite.png) no-repeat top left;}
.sprite-checkmark { background-position: 0 -24px; width: 24px; height: 23px; }
.sprite-comment { background-position: 0 -48px; width: 14px; height: 14px; }
<div class="sprite sprite-checkmark"></div>
Is it possible to use sprites for the bullets of <li> elements? There are CSS properties called list-style-image, and list-style-position, but I'm not sure how to make it work without the existence of properties like list-style-image-width and list-style-image-height as well.
是否可以将精灵用于 <li> 元素的项目符号？有名为 list-style-image 和 list-style-position 的 CSS 属性，但我不确定如何在不存在 list-style-image-width 和 list-style-image-height 等属性的情况下使其工作以及。
Thanks.
谢谢。
回答by designitsimple
You can also use
你也可以使用
li:before {
background:url(..) no-repeat -##px -##px;
width:##px;
height:##px;
display:block;
position:absolute;
content: " ";
top:##px;
left:##px;
}
and thus get an additional element added to the DOM and give that the background image.
从而将额外的元素添加到 DOM 并提供背景图像。
回答by Hux
you can use exactly the same method to do CSS sprites on a List. Here's a quick sample:
您可以使用完全相同的方法在列表上执行 CSS 精灵。这是一个快速示例：
ul {
list-style-type:none;
}
ul li {
background:url(images/list-image.gif) no-repeat;
height:24px;
}
ul li.comment {
background-position: 0 -24px;
/*Override properties here if you wish */
}
And the html
和 html
<ul>
<li class="comment">Test</li>
</ul>
You'll have to remove the default padding/margin with the appropriate CSS styles. Personally i've not seen the list-style-image stuff being used before but know the above is a common solution.
您必须使用适当的 CSS 样式删除默认的填充/边距。就我个人而言，我之前没有看到过使用 list-style-image 的东西，但知道上面是一个常见的解决方案。
回答by Pro Backup
List elements background images via sprites have pittfalls, due to variable heights and widths. Think of users that enlarge their font size. Now your imagined li height becomes heigher than expected and your other sprite images become visible. Most useful for list and sprites are when the images are top left aligned. Stacking images diagonally from bottom left to top right gives most chance to prevent other sprite elements to become visible. Left vertical centered images required fixed width of the outer element (example 800px), and the width of the sprite images becomes that width, times the number of different images. 10 different tick marks times 800 px = 8000px wide sprite.
由于高度和宽度可变，通过精灵列表元素背景图像存在缺陷。想想放大字体大小的用户。现在你想象的 li 高度变得比预期的要高，你的其他精灵图像变得可见。当图像左上对齐时，对列表和精灵最有用。从左下角到右上角对角堆叠图像可以最大程度地防止其他精灵元素变得可见。左垂直居中的图像需要固定宽度的外部元素（例如 800 像素），精灵图像的宽度变为该宽度，乘以不同图像的数量。10 个不同的刻度线乘以 800 像素 = 8000 像素宽的精灵。
A graphical example:
图形示例：
|--------------- 800px -------------|
|--------------- 800px ------------|
+-------+----------------------------------------------------------------------+
| Img 1 | |
+-------+ |
| |
| |
| |
| +-------+ |
| | Img 2 | |
| +-------+ |
| |
| |
| |
| |
| +-------+
| | Img 3 |
+----------------------------------------------------------------------+-------+
回答by ctrombley
Inside your list item you make an empty span like this:
在您的列表项中，您可以像这样创建一个空跨度：
<ul>
<li>
<span class="bullet"></span> Example text
</li>
</ul>
In your css you style like this
在你的 css 中，你的风格是这样的
.bullet
{
height: 10px;
width: 10px;
position: relative;
top:2px; /*to align vertically*/
display: inline-block;
overflow: hidden;
background-image: url(/sprite.png);
background-position: 0 -30px;
}
This will help solve the issue of users increasing text size and revealing other sections of the sprite. Hope that can help.
这将有助于解决用户增加文本大小和显示精灵其他部分的问题。希望能有所帮助。
回答by user3004751
You can solve this very simple by putting your image on the bottom of your sprite image with no images to the right.
您可以通过将图像放在精灵图像的底部而右侧没有图像来解决这个非常简单的问题。
回答by Simon_Weaver
I think using 'traditional' csssprites is too risky - as pointed out by @Pro Backup.
我认为使用“传统”csssprites 风险太大——正如@Pro Backup 所指出的那样。
This was the best compromise for me. You put the image in base64 format and a fallback standard style for [really] old browsers. That way you only have 1 request for css. A typical encoded bullet should only be a couple hundred bytes.
这对我来说是最好的妥协。您将图像以 base64 格式和 [真正] 旧浏览器的后备标准样式放置。这样你只有 1 个 css 请求。一个典型的编码子弹应该只有几百个字节。
li
{
list-style: square;
list-style-image: url(data:image/png;base64,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);
}
View it:http://jsfiddle.net/VThLq/1/
回答by gumbar
you can use a style in the ul to accomplish the same thing.
你可以在 ul 中使用一个样式来完成同样的事情。
ul {
list-style:square url(../images/whatever.png);
}
