Question

如下所示，我正在使用下面的图像精灵工作正常。我想知道的是如何将它们用作div的背景，而不是width和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

你可能误解了精灵的点......你想要实现的是精灵无法实现的，背景图像在这种情况下应该是单独的文件。

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

2 个答案: