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

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

Ответ 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

Ответ 2

Я создал jquery.backgroundSize.js: плагин jQuery 1.5K, который можно использовать в качестве резервной копии IE8 для значений "обложка" и "содержать", Посмотрите demo.

Ответ 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;

Ответ 4

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

Backstretch-plugin был указан на SO здесь. JQuery-backstretch-плагин-сайт .

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

(отказ от ответственности: я не рассматривал backstretch-plugin полностью, но, похоже, делает то же самое, что и размер фона: обложка)

Ответ 5

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

Чтобы процитировать документацию:

Загрузите backgroundsize.min.htc на свой сайт вместе с .htaccess, который отправит тип mime, требуемый IE (только Apache - он построен в nginx, node и IIS).

Всюду, где вы используете фоновый размер в своем 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);
}

Ответ 6

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

background-size: 100% 100%;

Ответ 7

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

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

Ответ 8

Я пробовал со следующим script -

.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;
}

Это сработало для меня!

Ответ 9

Я думаю, что лучший способ - добавить следующую строку в верхнюю часть вашего HTML файла. он отлично работает для меня!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">