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

Question

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

размытых один из которых IE11 OFC. Ширина спрайта составляет 189px, а высота - 378px. Я использую следующий 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, или я могу сделать что-то об этом?

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

EDIT: Я мог бы просто добавить, что если я просто вставляю то же изображение, что и <img src="lala.png">, текст НЕ размыт. Это относится только к фону:/

Answer 1

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

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

я не нашел решения этой теме пока нет.

Answer 2

Я бы рекомендовал не имея эту кнопку в качестве спрайта вообще для следующего reasons-

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

Если вы используете что-то вроде разметки this-

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

И CSS, как this-

.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 for source) -

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

Answer 3

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

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

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

Answer 4

Я только что пришел по этому вопросу.

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

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

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