css - 图像精灵作为元素的整个背景

Question

正如您在下面看到的，我正在使用下面的图像精灵，它工作正常。我想知道的是如何将它们用作div不具有widthand的背景height。

谢谢

工作正常：

.social_buttons
{
    width: 30px;
    height: 30px;
    background-image: url('../images/social.png');
    background-repeat: no-repeat;
}
.facebook
{
    background-position: 0px 0px;
}
.twitter
{
    background-position: -30px 0px;
}
.google
{
    background-position: -60px 0px;
}

这将所有 3 个图像显示为背景并重复显示。

.mydiv
{
   background-image: url('../images/social.png');
   background-position: -60px 0px;
}

这将所有 3 张图像显示为背景，并且仅显示一次。

.mydiv
{
   background-image: url('../images/social.png');
   background-position: -60px 0px;
   background-repeat: no-repeat;
}

Answer 1

在某些情况下，您可以使用百分比来应用没有确定大小的背景。

一个按钮精灵：

 -------
|       |
|       | Default top half.
|       |
 -------
 -------
|       |
|       | :active bottom half.
|       |
 -------


button {
     background-image: url('#');
     background-size: 100% 200%;
}
button:active { background-position: bottom; }

由于精灵被均匀地分成两部分，200% 将使图像增加一倍，因此只有一半的图像可见。

这是一个显示这一点的示例。更改高度和宽度以查看它是否正常工作。

http://codepen.io/nickcolley/pen/KuLla

Answer 2

您可能误解了精灵的意义......您试图实现的目标不能用精灵来完成，在这种情况下，背景图像应该单独放在一个单独的文件中。