jQuery と CSS を使用して背景画像をストレッチする_jquery

WEBページのデザインで大きな背景画像を使うのが流行していますが、大きな背景画像を使ってストレッチ効果を生み出す方法をご存知ですか？つまり、コンピューターのデスクトップの壁紙効果と同じように、固定サイズの背景画像を使用し、ページ内のブラウザーのサイズに合わせて伸縮させます。この記事では、jQuery と CSS を使用して背景画像のストレッチ効果を実現する方法を説明します。

背景画像をタイル化する代わりにストレッチする タイル効果に注目してください。この記事では、背景画像のタイル効果を実装するために使用します。この効果は、一部の前衛的なページ デザイン、特に一部の独立したページで広く使用されており、ログイン ページでは引き伸ばされた背景画像効果を使用するのが一般的です。
背景画像の伸縮効果を実現するには現在 2 つの解決策があります。1 つは CSS を使用して画像の伸縮効果を実現する方法です。ただし、IE8 以下では、background-size をサポートしていません。 Microsoft のフィルター効果を使用できますが、IE6 はそれをサポートしていません。結局のところ、IE6 を使用するのに十分でない人がまだいます。もう 1 つの解決策は、jQuery を使用することです。これにより、ブラウザの互換性の問題が完全に解決されます。jQuery は依然として強力です。
CSS ソリューション
任意のサイズの背景画像を用意し、ログイン ページを作成し、ページ内で浮き上がった背景画像を使用するとします。次のコードを本文に追加するだけです:

<div id="main"> 
...登录表单 
</div> 

CSS は次のように記述されます:

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} 

背景画像の伸縮効果を実現するために、background-size を使用しますが、IE7 および IE8 と互換性を持たせるには、このソリューションでは、 を使用する必要があることに注意してください。コンテナの高さを指定します、この例では height:900px を指定します。
CSS ソリューションには特定の制限があり、コンテナーの高さを指定する必要があり、IE6 には互換性がないため、完璧なソリューションは jQuery を使用することです。
jQuery ソリューション
jQuery を使用して、最初に DIV を動的に本文に挿入します。DIV には、ストレッチ効果が必要な背景画像である画像が含まれています。次に、jQuery を使用してブラウザ ウィンドウのサイズを取得し、ブラウザ ウィンドウのサイズに基づいて背景画像のサイズ (幅と高さ) を動的に設定します。

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

上記のコードでは、cover() 関数が背景画像のサイズを動的に設定します。背景画像は、ページがロードされてブラウザー ウィンドウが変更されると、jQuery の append メソッドによって動的に追加されます。その結果、ページの準備完了とサイズ変更の両方で cover() 関数が呼び出されます。

上記の 2 つの解決策に満足していますか?私は jQuery ソリューション 、 を好みます。つまり、これが、jQuery と CSS を使用して背景画像をストレッチするテクニックをより良く習得するのに役立つことを願っています。