Wie kann ich Hintergrundgröße in IE arbeiten lassen?

Gibt es eine bekannte Möglichkeit, den CSS-Stil background-sizeim IE zum Laufen zu bringen?

Ein bisschen spät, aber das könnte auch nützlich sein. Für IE 5.5+ gibt es einen IE-Filter, den Sie anwenden können:

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

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

Dadurch wird jedoch das gesamte Bild so skaliert, dass es in den zugewiesenen Bereich passt. Wenn Sie also ein Sprite verwenden, kann dies zu Problemen führen.

Spezifikation: AlphaImageLoader Filter @microsoft

Ich habe jquery.backgroundSize.js erstellt : ein 1,5-KByte-jquery-Plugin, das als IE8-Fallback für "cover" - und "include" -Werte verwendet werden kann. Schauen Sie sich die Demo an .

Dank dieses Beitrags lautet mein vollständiges CSS für Cross-Browser-Glück:

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

Es ist so lange her, dass ich an diesem Code gearbeitet habe, aber ich möchte aus Gründen der Browserkompatibilität hinzufügen, dass ich dies aus Gründen der Browserkompatibilität an mein CSS angehängt habe:

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

Auch später, aber das könnte auch nützlich sein. Es gibt das jQuery-Backstretch-Plugin, das Sie als Polyfill für Hintergrundgröße: Cover verwenden können. Ich denke, es muss möglich (und ziemlich einfach) sein, die CSS-Hintergrund-URL-Eigenschaft mit jQuery abzurufen und sie dem jQuery-Backstretch-Plugin zuzuführen. Es wird empfohlen, mit modernizr die Unterstützung der Hintergrundgröße zu testen und dieses Plugin als Fallback zu verwenden.

Das Backstretch-Plugin wurde hier auf SO erwähnt. Die jQuery-Backstretch-Plugin-Site ist hier .

In ähnlicher Weise können Sie ein jQuery-Plugin oder ein Skript erstellen, mit dem die Hintergrundgröße in Ihrer Situation (Hintergrundgröße: 100%) und in IE8- funktioniert. Um Ihre Frage zu beantworten: Ja, es gibt einen Weg, aber atm gibt es keine Plug-and-Play-Lösung (dh Sie müssen selbst etwas programmieren).

(Haftungsausschluss: Ich habe das Backstretch-Plugin nicht gründlich untersucht, aber es scheint dasselbe zu tun wie Hintergrundgröße: Cover)

Dafür gibt es eine gute Polyfüllung : Louisremi / Hintergrundgröße-Polyfüllung

So zitieren Sie die Dokumentation:

Laden Sie backgroundize.min.htc zusammen mit dem .htaccess, der den vom IE benötigten MIME-Typ sendet, auf Ihre Website hoch (nur Apache - er ist in Nginx, Node und IIS integriert).

Fügen Sie überall dort, wo Sie Hintergrundgröße in Ihrem CSS verwenden, einen Verweis auf diese Datei hinzu.

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

In IE11 Windows 7 hat das bei mir funktioniert,

background-size: 100% 100%;

Sie können diese Datei ( https://github.com/louisremi/background-size-polyfill "Hintergrundgröße Polyfill") für IE8 verwenden, die wirklich einfach zu verwenden ist:

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

Ich habe es mit folgendem Skript versucht -

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

Es hat bei mir funktioniert!