CSS sprite - отображение части другого изображения при масштабировании

Question

У меня есть следующий спрайт CSS. Когда я пытаюсь отобразить первый значок, он работает нормально, но когда я устанавливаю увеличение до 150%, я вижу также небольшую часть второго значка. Эта проблема есть в Google Chrome и Internet Explorer, но не в Mozilla Firefox:

JSfiddle

div {
    width: 29px;
    height: 29px;
    background-image: url(http://i.imgur.com/O2Cp0nb.png);
}

<div></div>

Вот так у меня выглядит при 150% увеличении:

Обновление: Крис предположил, что мне нужно поместить некоторое пространство между иконками. Итак, мой вопрос: почему? И почему он отлично работает на Mozilla Firefox даже без этого места?

Answer 1

В некоторых случаях разные браузеры могут использовать разные алгоритмы округления чисел и рендеринга изображений. Вы можете прочитать некоторые статьи об этом, например - это и это.

Итак, когда ваш zoom является 150% и у тебя есть 29x29 px изображение, ваш браузер должен сделать 43.5x43.5 px изображение Как каждая версия каждого браузера будет округлять его? Мы не знаем, может быть 43x43 px, может быть 44x44 гарнизонная лавка Есть статья о спрайтах и ​​зуме.

Я создаю новый фрагмент кода с двумя парами изображений. Первая пара использует ваш образ спрайта, а вторая - мой. Я увеличил размер изображения Facebook с 29x29 px к 30x30 гарнизонная лавка Попробуйте увеличить его. Вы можете видеть, что у них есть проблемы на разных zoom соотношение (первое - на 150% вторая - на 110% - 125%).

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/O2Cp0nb.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/O2Cp0nb.png) 0 -29px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/mRIPLXO.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/mRIPLXO.png) 0 -30px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

Итак, мой совет, чтобы добавить 1px между изображениями, независимыми от разных браузеров, алгоритмы округления и ошибки браузеров:

JSFiddle

.fb29 {
    width: 29px;
    height: 29px;
    background: url(http://i.imgur.com/dKxYwhZ.png) no-repeat;
    background-size: 29px;
}

.sun29 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/dKxYwhZ.png) 0 -30px no-repeat;
    background-size: 29px;
}

.fb30 {
    margin-top: 10px;
    width: 30px;
    height: 30px;
    background: url(http://i.imgur.com/1fJyJVK.png) no-repeat;
    background-size: 30px;
}

.sun30 {
    margin-top: 10px;
    width: 16px;
    height: 16px;
    background: url(http://i.imgur.com/1fJyJVK.png) 0 -31px no-repeat;
    background-size: 30px;
}

<div class="fb29"></div>
<div class="sun29"></div>

<div class="fb30"></div>
<div class="sun30"></div>

Если вам нужна поддержка старых браузеров IE, загляните в эту статью.

Теперь вы можете использовать некоторые полезные вещи на gulp / grunt для автоматического создания спрайтов, где вы можете установить разрыв / поле между изображениями. Смотрите это.

Answer 2

Кажется, что проблема заключается в интерполяции изображения или ошибках округления размера изображения.

Может быть, попробуйте это:

background-size: 101%;

Это странно, но работает в IE 11.

Answer 3

Когда я пытаюсь отобразить первый значок, он работает нормально, но когда я устанавливаю увеличение до 150%, я вижу также небольшую часть второго значка.

Поскольку у вас есть размер, определенный для контейнера, используйте background-size: cover; следует исправить проблему масштабирования для вас. Изображение воли "cover" вся ширина или высота контейнера.

Answer 4

Похоже, вы используете пиксели CSS, чтобы обрезать кусок большего изображения. Это то, что я вижу, глядя на URL вашего изображения.

Как насчет использования URL с одним значком Facebook, установленным на 29x29, как в этом примере значка Facebook?

Вы также можете обрезать значок Facebook и установить его на 29x29 с помощью графического редактора. Я сделал это для вас с помощью Adobe Photoshop

Надеюсь это поможет