Question

我有一张我在css中用作背景的图像。我现在想要有两个图像，一个接一个。想想，早些时候我的网站有一个赞助商，现在有两个赞助商，所以，有两个徽标。

我能够通过谷歌搜索添加两个背景图像，但第二个图像的位置正好在第一个图像的顶部。当我给出像素值时，它也会消失。

这是我目前的代码

.app-header-logo {
    background-image: url("../images/image1.png"),url("../images/image2.png");
    background-position: center center, 200px center;
    background-repeat: no-repeat;
    float: left;
    height: 50px;
    vertical-align: middle;
    width: 265px;
}

.app-header-logo a {
    float:left;
    width:190px;
    height:50px;
    text-indent:-999px;
}

如何在image1之后立即拥有image2？

Answer 1

这可以通过使用CSS Sprites来实现，通过精灵，您可以将多个图像组合成一个 .png 或 .jpg 文件。有一个很棒的 online tool ，它可以帮助您将这些图片合并到一个文件中并使用它们，您只需要调用一个类，例如.sponsor-1，它将包含赞助商数字1图像的background-position，以及它自动构建您的CSS，因此您不必担心为每个赞助商图像找到正确的背景位置。以下是如何使用它们的示例：

.sponsor-1, .sponsor-2{
    background: url(sprites.png) no-repeat;
}

.sponsor-1{
    background-position: 0 0;
    width: 80px;
    height: 50px;
}
.sponsor-2{
    background-position: -26px 0;
    width: 80px;
    height: 50px;
}

定位在css中有多个背景图像

1 个答案: