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

188

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

css internet-explorer

— JD Isaacks
źródło

1

Jaki efekt próbujesz uzyskać?

— ZippyV

@ZippV Mam divę o szerokości około 250 pikseli. ale obraz w tle ma szerokość 300 pikseli. Chcę, aby obraz tła był całkowicie dopasowany (rozmiar tła: 100%), aby się nie odcinał. Następnie :hoverchcę, aby rozmiar tła zmienił się na pełną 300 pikseli (rozmiar tła: auto), aby stworzyć iluzję powiększania

— JD Isaacks

1

Ten sam efekt można osiągnąć, używając tagu img. Jeśli potrzebujesz czegoś więcej, użyj indeksu Z.

— ZippyV

1

@John rozważ zmianę zaakceptowanej odpowiedzi, jeśli obejście Dana zadziałało dla Ciebie!

— Pekka

@ZippyV Tag IMG ma czasem niepotrzebne skutki uboczne, na przykład można go wybrać lub kliknąć prawym przyciskiem myszy. Czasem są OK, a czasem nie.

— peterh - Przywróć Monikę

312

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

— Dan
źródło

12

Zastanawiam się, dlaczego MS nie tylko zaimplementowało tę funkcjonalność za pomocą CSS. Wielkie dzięki!

— Martin Andersson,

2

Które wersje IE obsługują to proszę?

— ᆼ ᆺ ᆼ

8

Jeśli używasz linków i przycisków w elemencie, który to zdefiniowaliśmy, te linki i przyciski nie będą działać. Czy ktoś zna metodę, aby to naprawić?

— rubyprince

2

Musiałem dodać position: relative; z-index: 999dla danych wejściowych przycisk a wewnątrz takich div

— rubyprince

10

Metoda skali nie zachowuje jednak współczynnika. Najlepiej więc, aby element miał taki sam współczynnik jak obraz.

— Yves Van Broekhoven

45

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 .

— Louis-Rémi
źródło

12

Zgodnie z dokumentacją jquery.backgroundSize.js, wtyczka jest przestarzała i zamiast tego zaleca się wypełnianie wielowymiarowymi rozmiarami tła .

— VOIDHand

Zaktualizowana wersja nie działa background-position: fixed.

— Ryan Burney

@VOIDHand Zarówno filtr, jak i wypełniacz nie działały dla mnie, skorzystałem z jquery.backgroundSize dla sukcesu

— Chris Marisic

21

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;

— Scott Dallas
źródło

@ Gaurav123 try-webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;

— honk31

5

to sprawia, że mój ie8 wyświetla dwukrotnie obraz tła - jeden ze skalowanymi wymiarami, a drugi duży, nie wielkości.

— arekk

ie7: Wygląda OK, ale nie może już klikać linków. (Dlaczego ie7? Witryny rządowe bardzo wolno aktualizują)

— Robbie Matthews

5

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)

— metatron
źródło

5

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

— dorycki
źródło

Ten wypełniacz po prostu działa. background-size: okładka lub zawiera w IE8. Bez musów, bez zamieszania.

— jimlongo

to podejście obsługuje zarówno containi cover. Zawiera niezbyt złe 5,7 KB, ponieważ przesyła w jednym pakiecie sieciowym.

— SMMousavi

2

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

background-size: 100% 100%;

— Jana
źródło

0

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

0

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!

— Bulla
źródło

dla jakiej wersji?

— nihiser