Question

哇，这比我预想的要难！

我们正尝试在网格中的响应式网站上使用图片精灵作为CSS背景图片。

请check out our jsfiddle of the scenario。

基本上，当调整大小时，需要调整精灵的背景图像以适应父容器（<span>）。

我已经将背景图像转换为data:image，认为这将是第一步（尽管我不确定），现在还不确定如何使精灵的背景图像响应。

到目前为止我尝试的所有内容最终都会在网格中的每个容器中显示完整的精灵图像。

Answer 1

您在流体设置中使用绝对像素值和背景大小。尝试将背景位置转换为流体单位（如百分比）并添加背景大小以允许spritesheet使用容器调整大小。

通过移除图像容器的内部高度并应用填充，可以使容器的高度比保持不变：

.credits-grid li span.image {
  background: url(../images/credits.png) no-repeat;
  padding-top: 90%;
  height: 0;
  overflow: hidden;
  background-size: 500% auto;
}

然后通过计算精灵位置的百分比坐标而不是像素值，您可以允许它在容器改变大小时自由移动到位：

.credits-grid li span.image.c10 {
  background-position: -26% 50%;
}

你可以在这个小提琴上看到这个：http://jsfiddle.net/nsvka987/2/

使用图像精灵作为CSS背景图像的响应网格

1 个答案: