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?

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ę

Odpowiedzi:

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

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