IE11 делает текст фонового изображения размытым

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

IE11Другой браузер

Размытым является IE11 ofc. Ширина спрайта составляет 189 пикселей, а высота — 378 пикселей. Я использую следующий CSS:

button {
    width:189px;
    height:189px;
    background-image:url('../images/kontakt-os.png');
    background-position: top;
    cursor:pointer;
    border-radius: 100px;
}

button:hover {
    background-position: bottom;
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}

Так это просто недостаток IE, или я действительно могу что-то с этим сделать?

Заранее спасибо.

РЕДАКТИРОВАТЬ: я мог бы просто добавить, что если я просто вставлю то же изображение, что и <img src="lala.png">, текст НЕ будет размытым. Это относится только к фону :/


css background-image internet-explorer-11 sprite
person Denver Dang    schedule 21.12.2013    source источник
comment
любимая часть: Это просто недостаток IE? ...   -  person Phlume    schedule 22.12.2013
comment
Это из-за радиуса. Если бы у кнопки не было радиуса, размытия не произошло бы. Не знаю, почему.   -  person Christina    schedule 01.01.2014
comment
У меня была аналогичная проблема, мой вопрос (и ответы) здесь: stackoverflow.com/questions/20093634/   -  person wf4    schedule 22.03.2014

Ответы (4)


arrow_upward
6
arrow_downward

Это обычная ошибка IE.

http://www.infoworld.com/t/microsoft-windows/blurry-fonts-bug-kb-2670838-persists-ie11-and-windows-7-231035

Я еще не нашел решений на эту тему.

person Softwarehuset    schedule 21.12.2013

arrow_upward
5
arrow_downward

Я бы рекомендовал вообще не использовать эту кнопку в качестве спрайта по следующим причинам:

  1. Оно недоступно и неэффективно с точки зрения SEO — ни программы чтения с экрана, ни сканеры поисковых систем не могут прочитать текст на изображении.
  2. Требуется дополнительный HTTP-запрос для загрузки изображения спрайта, что замедлит загрузку вашего сайта, особенно на мобильных устройствах.
  3. Если вы не сделаете кнопку намного больше, чем нужно для отображения на странице, и уменьшите масштаб, у вас возникнут проблемы с размытием при увеличении на устройствах с высокой плотностью, таких как новые полноразмерные iPad и премиум-классы. Планшеты Android, новейшие компьютеры Mac и ноутбуки премиум-класса с Windows. Очевидно, что увеличение изображения больше, чем оно должно быть, означает, что оно больше и усугубляет штраф за скорость из пункта два.
  4. Если вы хотите изменить цветовую схему в любой момент в будущем, вам нужно только изменить свои цветовые свойства CSS, а не повторно генерировать новые изображения.
  5. тривиально сделать так, чтобы эта кнопка выглядела как скриншот в CSS.

Если вы используете разметку примерно так:

<button class="text-button" type="button">Send Besked</button>

И такой CSS-

.text-button {  
    background: #b32e01;
    border: none;
    border-radius: 8px 8px 8px 0;
    color: #ffffff;
    cursor: pointer;
    height: 3em;
    outline: none;
    padding: 1em 0;
    text-transform: uppercase;
    width: 12.5em;
}

.text-button:hover {
    -webkit-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    -moz-box-shadow: 0px 10px 1px 1px rgba(179, 47, 1, 1.0);
    box-shadow: 0px 0px 10px 1px rgba(179, 47, 1, 1.0);
}

В итоге это выглядит так (см. JSFiddle для исходного кода) -

Мокап кнопки

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

person pwdst    schedule 01.01.2014

arrow_upward
2
arrow_downward

Я только что столкнулся с этой проблемой.

Я просто поместил фоновое изображение внутри диапазона, чтобы сохранить радиус границы и фоновое изображение на разных элементах, похоже, это помогло.

.item {
   border-radius: 8px 8px 8px 0;
}

.item span {
    background-image:url('imagepath.png');
}
person sarah3585    schedule 14.12.2014

arrow_upward
0
arrow_downward

Мне удалось устранить эффект размытия с помощью :not(:hover). Кажется, фоновое изображение не размывается.

Попробуйте добавить

button:not(:hover) {
  width:189px;
  height:189px;
  background-image:url('../images/kontakt-os.png');
  background-position: top;
  cursor:pointer;
  border-radius: 100px;
}
person Andy    schedule 25.03.2014