Mittlerweile ist es beliebt, beim Design von Webseiten große Hintergrundbilder zu verwenden. Wissen Sie also, wie man mit einem großen Hintergrundbild einen Dehnungseffekt erzeugt? Das bedeutet, dass Sie ein Hintergrundbild mit fester Größe verwenden und es entsprechend der Browsergröße auf der Seite dehnen lassen, genau wie bei unserem Computer-Desktop-Hintergrundeffekt. Dieser Artikel führt Sie durch die Verwendung von jQuery und CSS, um einen Hintergrundbild-Stretching-Effekt zu erzielen.
Dehnen Sie das Hintergrundbild, anstatt es zu kacheln. Wir können CSS-Hintergrundwiederholung verwenden, um den Kacheleffekt des Hintergrundbilds zu implementieren. Dieser Effekt wurde häufig in einigen avantgardistischen Seitendesigns verwendet, insbesondere bei einigen unabhängigen Seiten. Es ist üblich, dass Anmeldeseiten gestreckte Hintergrundbildeffekte verwenden.
Derzeit gibt es zwei Lösungen, um den Streckungseffekt von Hintergrundbildern zu erzielen. Wir können die Hintergrundgröße verwenden, um den Streckungseffekt von Bildern zu erzielen. Daher haben wir es versucht Verwenden Sie den Microsoft-Filtereffekt, aber IE6 unterstützt ihn nicht. Schließlich gibt es immer noch einige Underachiever, die IE6 verwenden. Eine andere Lösung ist die Verwendung von jQuery, wodurch das Problem der Browserkompatibilität vollständig gelöst wird und jQuery immer noch leistungsstark ist.
CSS-Lösung
Wir bereiten ein Hintergrundbild beliebiger Größe vor. Angenommen, wir möchten eine Anmeldeseite erstellen und ein erhabenes Hintergrundbild auf der Seite verwenden. Wir müssen dem Text nur den folgenden Code hinzufügen:
<div id="main"> ...登录表单 </div>
Dann wird das CSS so geschrieben:
body{background:url(bg.jpg) center center;background-size:cover;height:900px;width:100%;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='bg.jpg', sizingMethod='scale');}
#main{position:absolute; top:50%; left:50%; width:420px; height:250px;
margin:-125px 0 0 -210px; background:#ffc}
Wir verwenden die Hintergrundgröße, um den Streckungseffekt des Hintergrundbilds zu erzielen, aber um mit IE7 und IE8 kompatibel zu sein, müssen Sie einen Filter verwenden, um dies zu erreichen. muss Geben Sie die Höhe des Containers an, in diesem Beispiel wird height:900px angegeben.
Die CSS-Lösung weist bestimmte Einschränkungen auf, die Containerhöhe muss angegeben werden und IE6 ist nicht kompatibel. Daher ist die Verwendung von jQuery die perfekte Lösung.
jQuery-Lösung
Wir verwenden jQuery, um zunächst dynamisch ein DIV in den Körper einzufügen, und das DIV enthält ein Bild, das das Hintergrundbild ist, für das wir einen Streckungseffekt benötigen. Verwenden Sie dann jQuery, um die Größe des Browserfensters zu ermitteln, und legen Sie die Größe (Breite und Höhe) des Hintergrundbilds basierend auf der Größe des Browserfensters dynamisch fest.
$(function(){
$("body").append("<div id='main_bg'/>");
$("#main_bg").append("<img src='bg.jpg' id='bigpic'>");
cover();
$(window).resize(function(){ //浏览器窗口变化
cover();
});
});
function cover(){
var win_width = $(window).width();
var win_height = $(window).height();
$("#bigpic").attr({width:win_width,height:win_height});
}
Im obigen Code legt die Funktion cover() dynamisch die Größe des Hintergrundbilds fest. Das Hintergrundbild wird dynamisch über die Append-Methode von jQuery hinzugefügt. Wenn die Seite geladen wird und sich das Browserfenster ändert, kann das Hintergrundbild gestreckt werden Der Effekt besteht darin, dass sowohl die Funktion „Seite bereit“ als auch „Größe ändern“ die Funktion „cover()“ aufrufen.
Sind Sie mit den beiden oben genannten Lösungen zufrieden? Ich bevorzuge die jQuery-Lösung , Kurz gesagt, ich hoffe, dass sie jedem helfen kann, die Techniken zum Strecken von Hintergrundbildern mit jQuery und CSS besser zu beherrschen.
