Как мне заставить фоновый размер работать в IE?

Question

Есть ли какой-нибудь известный способ заставить стиль CSS background-size работать в IE?

Answer 1

Немного поздно, но это также может быть полезно. Для IE 5.5+ есть фильтр IE, который вы можете применить:

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale');

-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/logo.gif',
sizingMethod='scale')";

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

Спецификация: AlphaImageLoader Filter @ microsoft

Answer 2

Я создал jquery.backgroundSize.js : плагин jquery размером 1,5 КБ, который можно использовать как запасной вариант IE8 для значений «cover» и «содержать». Взгляните на демоверсию .

Answer 3

Благодаря этому посту, мой полный CSS для кросс-браузерного счастья:

<style>
    .backgroundpic {
        background-image: url('img/home.jpg');
        background-size: cover;
        filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
        src='img/home.jpg',
        sizingMethod='scale');
    }
</style>

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

-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;

Answer 4

Для этого есть хороший polyfill: louisremi / background-size-polyfill

Цитировать документацию:

Загрузите фоныizeize.min.htc на свой веб-сайт вместе с .htaccess, который отправит MIME-тип, необходимый для IE (только для Apache - он встроен в nginx, узел и IIS).

Везде, где вы используете background-size в вашем CSS, добавьте ссылку на этот файл.

.selector { 
    background-size: cover;
    /* The url is relative to the document, not to the css file! */
    /* Prefer absolute urls to avoid confusion. */
    -ms-behavior: url(/backgroundsize.min.htc);
}

Answer 5

Даже позже, но это тоже может быть полезно. Существует плагин jQuery-backstretch-plugin, который вы можете использовать в качестве полизаполнения для background-size: cover. Я думаю, что должно быть возможно (и довольно просто) получить свойство css-background-url с помощью jQuery и передать его плагину jQuery-backstretch. Хорошей практикой было бы проверить поддержку background-size-size с помощью modernizr и использовать этот плагин в качестве запасного варианта.

Backstretch-плагин был упомянут на SO здесь . JQuery-backstretch-plugin-site здесь .

Аналогичным образом вы можете создать плагин или скрипт jQuery, который заставит работать с размером фона в вашей ситуации (background-size: 100%) и в IE8-. Итак, чтобы ответить на ваш вопрос: Да, есть способ, но в банкомате нет решения «включай и работай» (т. Е. Вы должны сами написать код).

(заявление об отказе: я не исследовал плагин backstretch-плагина, но, похоже, он работает так же, как background-size: cover)

Answer 6

В IE11 Windows 7 это работало для меня,

background-size: 100% 100%;

Answer 7

Я пробовал с помощью следующего скрипта -

.selector { 
background-image: url("img/image.jpg");
background-size: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-repeat: no-repeat;
}

У меня это сработало!

Answer 8

вы можете использовать этот файл (https://github.com/louisremi/background-size-polyfill «фоновое заполнение») для IE8, который действительно прост в использовании:

.selector {
background-size: cover;
-ms-behavior: url(/backgroundsize.min.htc);
}