CSS Sprite в изменчивом макете - PullRequest
Новая
       30

CSS Sprite в изменчивом макете

4 голосов
/ 17 октября 2011

У меня есть фоновое изображение для CSS-спрайта

enter image description here

Теперь проблема в том, что я могу использовать только текучую разметку (только%, без пикселей), а позиционирование% создает проблему при изменении размера браузера (например, отображается некоторая часть другой стрелки)

Как мне это исправить? Могу ли я получить пример использования% позиционирования для фона?

Ответы [ 2 ]

5 голосов
/ 17 октября 2011

Текущее расположение и использование фиксированного позиционирования не являются взаимоисключающими.

Если на странице есть элемент, который не раскрывается, например кнопка, использующая фон спрайта, тогда использование px для размера или позиции подходит (возможно, обязательно).

0 голосов
/ 04 августа 2015

Предполагая, что значок сохраняет свой размер, вы можете переместить изображение к фиксированному размеру, с абсолютным позиционным дочерним элементом: 

.icon {
  /* fluid 30% with 1:1 aspect ratio */
  display: inline-block;
  width: 30%;
  padding-bottom: 30%;
  position: relative;
  border: 1px solid hotpink;
}
.icon::before {
  content: "";
  /* auto margin trick for horizontal + vertical centering */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  /* match icon size */
  width: 30px;
  height: 30px;
  background-image: url(http://i.stack.imgur.com/th9Xy.png);
}
.icon.icon1::before {
  background-position: 0 0;
}
.icon.icon2::before {
  background-position: -30px 0;
}
.icon.icon3::before {
  background-position: -60px 0;
}
.icon.icon4::before {
  background-position: 0 -30px;
}
.icon.icon5::before {
  background-position: -30px -30px;
}
.icon.icon6::before {
  background-position: -60px -30px;
}
<span class="icon icon1"></span>
<span class="icon icon2"></span>
<span class="icon icon3"></span>
<span class="icon icon4"></span>
<span class="icon icon5"></span>
<span class="icon icon6"></span>
...