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

Question

У меня есть following 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

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

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

Я создаю новый фрагмент кода с двумя парами изображений. Первая пара использует ваш спрайт изображения, а второй - мой. Я увеличил размер изображения Facebook с 29x29 px до 30x30 px Попробуйте увеличить масштаб. Вы можете видеть, что у них проблемы с разным соотношением 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, смотрите в this article.

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

Answer 2

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

Как об использовании URL со значком facebook в одиночку установить на 29x29 как этот facebook icon example?

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

Надеется, что это помогает

Answer 3

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

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

Answer 4

Проблема, по-видимому, связана с ошибками округления изображения или размера изображения.

Может попробовать это:

background-size: 101%; 

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