Question

我有一个我想要使用的精灵图像。我可以在台式机尺寸显示器上按照我想要的方式工作，但是在较小的屏幕尺寸上，事情变得糟糕，精灵也没有响应。

这是我目前拥有的codepen。

我试过玩：

background-size: options
background-clip: options

但仍然无法让它发挥作用。我的HTML是：

<div class="row">
  <div class="col-md-2 orange">
    <div class="img-wrap"></div>
    <h2>item-01</h2>
  </div>
  <div class="col-md-2 blue">
    <div class="img-wrap"></div>
    <h2>item-02</h2>
  </div>
  <div class="col-md-2 orange">
    <div class="img-wrap"></div>
    <h2>item-03</h2>
  </div>
  <div class="col-md-2 blue">
    <div class="img-wrap"></div>
    <h2>item-04</h2>
  </div>
  <div class="col-md-2 orange">
    <div class="img-wrap"></div>
    <h2>item-05</h2>
  </div>
  <div class="col-md-2 blue">
    <div class="img-wrap"></div>
    <h2>item-06</h2>
  </div>
</div>

CSS是：

.img-wrap {
  width: 100%;
  height: 145px;
  margin: 0 auto;
  background-image: url('http://oi57.tinypic.com/15qtcv7.jpg');
  background-repeat: no-repeat;
  background-color: transparent;
}

.orange .img-wrap {
  background-position: 0px 0px;
}

.blue .img-wrap {
  background-position: -155px 0px;
}

.col-md-2 h2 {
  text-align: center;
}

有没有办法让精灵响应？我试过谷歌，但我发现没有为我做的事

Bootstrap中响应式CSS Sprites

0 个答案: