Question

最近，当我右键单击十字图标并在“询问问题”页面的“标签”部分中看到背景图像时，我看到它由十字架以外的多个图标组成。我在谷歌上搜索了它并且知道它完成了使用html和css。搜索结果没有帮助。

我是html的新手，在搜索之后我被介绍给这个新语言css。对于像你这样的专家来说，这可能是一个简单的问题，但对于像我这样的初学者来说却很头疼。请我真的想知道它是如何完成的。

提前致谢..

Answer 1

它被称为spritesheet。如果你在互联网上搜索spritesheet + js / css，你会发现大量的信息，技巧和教程

Answer 2

1。使用background-image，background-position为设置宽度和高度的元素完成。

请看这个小提琴（它包含一个Facebook图片）：

http://jsfiddle.net/axF59/

2. 这些CSS查询可以通过使用Inspect Element来解决。就像你在Right Click > View Background Image看到了背景图片一样，你可以在Mozilla，Chrome等浏览器中通过Right Click > Inspect Element看到网页的CSS ...

Answer 3

这是使用CSS background-position和background-image属性完成的。它允许使用单个图像加载所有精灵。

background-position CSS属性为每个定义的背景图像设置初始位置。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/background-position

CSS background-image属性为元素设置一个或多个背景图像。图像在连续的堆叠上下文层上绘制，第一个指定的图像被绘制为好像它最接近用户。然后在元素的边框上绘制元素的边框，并在它们下面绘制背景颜色。

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

实施例

HTML

<span class="sprite sprite1"></span>
<span class="sprite sprite2"></span>
<span class="sprite sprite3"></span>

CSS

.sprite {
    display: inline-block;
    /* Replace this with a live image. */
    background-image: url("http://www.example.com/example.jpg");
    height: 16px;
    width: 16px;
}

.sprite1 {
    /* This doesn't actually need to be here, because this is default. */
    background-position: 0 0;
}

.sprite2 {
    /* Move 16 pixels to the left. */
    background-position: -16px 0;
}

.sprite3 {
    /* Move 16 pixels up. */
    background-position: 0 -16px;
}

仅显示图像的一小部分

3 个答案:

实施例

HTML

CSS