Jak sprawić, by rozmiar tła działał w IE?

Czy jest jakiś znany sposób, aby styl CSS background-sizedziałał w IE?

Trochę za późno, ale to też może być przydatne. Istnieje filtr IE dla IE 5.5+, który możesz zastosować:

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

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

Spowoduje to jednak skalowanie całego obrazu w celu dopasowania do przydzielonego obszaru, więc jeśli używasz duszka, może to powodować problemy.

Specyfikacja: AlphaImageLoader Filter @microsoft

Stworzyłem jquery.backgroundSize.js : wtyczkę jquery 1,5K, która może być używana jako awaryjna IE8 dla wartości „cover” i „zawiera”. Zobacz demo .

Dzięki temu postowi mój pełny css dla szczęścia w różnych przeglądarkach to:

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

Minęło tak dużo czasu, odkąd pracowałem nad tym fragmentem kodu, ale chciałbym dodać dla większej kompatybilności z przeglądarką Dodałem to do mojego CSS dla większej kompatybilności z przeglądarką:

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

Nawet później, ale to też może być przydatne. Istnieje wtyczka jQuery-backstretch, której można użyć jako wypełnienia dla rozmiaru tła: okładka. Myślę, że musi być możliwe (i dość proste) pobranie właściwości css-background-url za pomocą jQuery i przekazanie jej do wtyczki jQuery-backstretch. Dobrą praktyką byłoby przetestowanie obsługi rozmiaru tła za pomocą programu Moderr i użycie tej wtyczki jako rezerwowej.

Wtyczka backstretch została wspomniana tutaj na SO . Witryna jQuery-backstretch-plugin jest tutaj .

W podobny sposób możesz stworzyć wtyczkę lub skrypt jQuery, który sprawi, że rozmiar tła będzie działał w twojej sytuacji (rozmiar tła: 100%) oraz w IE8-. Tak więc, aby odpowiedzieć na twoje pytanie: Tak, istnieje sposób, ale w bankomacie nie ma rozwiązania typu plug-and-play (tj. Musisz samodzielnie napisać kod).

(zastrzeżenie: nie zbadałem dokładnie wtyczki backstretch-plug, ale wydaje się, że działa tak samo jak rozmiar tła: okładka)

Jest do tego dobry polifill: louisremi / polyfill-size-polyfill

Aby zacytować dokumentację:

Prześlij tła do swojej witryny wraz z plikiem .htaccess, który wyśle ​​typ MIME wymagany przez IE (tylko Apache - jest wbudowany w nginx, node i IIS).

Za każdym razem, gdy używasz rozmiaru tła w swoim CSS, dodaj odniesienie do tego pliku.

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

W IE11 Windows 7 to zadziałało dla mnie,

background-size: 100% 100%;

możesz użyć tego pliku ( https://github.com/louisremi/background-size-polyfill „wypełnienie wielkości tła”) dla IE8, który jest naprawdę prosty w użyciu:

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

Próbowałem z następującym skryptem -

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

To zadziałało dla mnie!