2014-01-31 2 views
4

У меня немного проблемы с IE разукрупнение CSS фоновые изображения с помощью фона: и фон-размер: атрибуты, как показано нижеInternet Explorer бикубическое фоновое изображение перемасштабирования

.llifLogo { 
background: url(images/llifmonotagline.png) no-repeat center; 
background-size: 550px; 
position: absolute; 
top: 60px; 
width: 100%; 
height: 170px; 

} 

Сайт живут на http://llif.co.uk. Выглядит отлично в других браузерах, но IE, похоже, уменьшает изображение, используя ближайший сосед, а не бикубический. Я понимаю, что когда-то был взломан с помощью -ms-interpolation-mode: bicubic;, но теперь это устарело.

У кого-нибудь есть идеи похудеть в IE?

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

Спасибо!

+1

ваша ссылка не открывается. можете ли вы поделиться некоторыми снимками экрана вашего дизайна пользовательского интерфейса? –

+0

Thnaks @GhostAnswer - это должно быть http://llif.co.uk –

+0

Вы просмотрели [статью для рендеринга изображений на MDN] (https://developer.mozilla.org/en-US/docs/ Web/CSS/изображений рендеринга)? Похоже, там может быть много, чтобы придумать решение вашей конкретной проблемы. –

ответ

1

Лучший (и, вероятно, единственный) способ сделать это - изменить размер .png-файла. Нет причин использовать 2808x1024 png с размером файла около 85 КБ, когда вы можете изменить размер файла на 550x201px, и он будет иметь ~ 15 КБ и будет красиво отображен. Просто используйте @media запросы для переключения между png с разным разрешением.

Смежные вопросы