Gunakan jQuery dan CSS untuk meregangkan background images_jquery

Kini popular untuk menggunakan imej latar belakang yang besar dalam reka bentuk halaman WEB, jadi adakah anda tahu cara menggunakan imej latar belakang yang besar untuk mencipta kesan regangan? Maksudnya, gunakan imej latar belakang bersaiz tetap dan biarkan ia memanjang dengan saiz penyemak imbas dalam halaman, sama seperti kesan kertas dinding desktop komputer kami. Artikel ini akan membawa anda menggunakan jQuery dan CSS untuk mencapai kesan regangan imej latar belakang.

Rentangkan imej latar belakang dan bukannya jubin Beri perhatian kepada kesan jubin Kita boleh menggunakan CSS latar-ulang untuk melaksanakan kesan jubin bagi imej latar belakang. Kesan ini telah digunakan secara meluas dalam beberapa reka bentuk halaman avant-garde, terutamanya dalam beberapa halaman bebas Ia adalah perkara biasa untuk halaman log masuk menggunakan kesan imej latar belakang yang diregangkan.
Terdapat dua penyelesaian untuk mencapai kesan regangan imej latar belakang gunakan kesan penapis Microsoft, tetapi IE6 tidak menyokongnya Lagipun, masih terdapat beberapa orang yang kurang berprestasi menggunakan IE6. Penyelesaian lain ialah menggunakan jQuery, yang menyelesaikan sepenuhnya masalah keserasian penyemak imbas, dan jQuery masih berkuasa.
Penyelesaian CSS
Kami menyediakan imej latar belakang dalam sebarang saiz. Katakan kami ingin membuat halaman log masuk dan menggunakan imej latar belakang yang dinaikkan dalam halaman. Kita hanya perlu menambah kod berikut pada badan:

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

Kemudian CSS ditulis seperti ini:

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} 

Kami menggunakan saiz latar belakang untuk mencapai kesan regangan imej latar belakang, tetapi untuk serasi dengan IE7 dan IE8, anda perlu menggunakan penapis untuk mencapainya. Ambil perhatian bahawa dalam penyelesaian ini, mesti nyatakan ketinggian bekas, ketinggian:900px dinyatakan dalam contoh ini.
Penyelesaian CSS mempunyai had tertentu, ketinggian bekas mesti ditentukan, dan IE6 tidak serasi, jadi penyelesaian terbaik adalah menggunakan jQuery.
penyelesaian jQuery
Kami menggunakan jQuery untuk memasukkan DIV secara dinamik ke dalam badan dahulu, dan DIV mengandungi gambar, iaitu gambar latar belakang yang kami perlukan kesan regangan. Kemudian gunakan jQuery untuk mendapatkan saiz tetingkap penyemak imbas, dan tetapkan saiz (lebar dan tinggi) imej latar belakang secara dinamik berdasarkan saiz tetingkap penyemak imbas.

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

Dalam kod di atas, fungsi cover() menetapkan saiz imej latar belakang secara dinamik melalui kaedah tambah jQuery Apabila halaman dimuatkan dan tetingkap penyemak imbas berubah, imej latar belakang boleh diregangkan . Kesannya ialah kedua-dua halaman bersedia dan mengubah saiz memanggil fungsi cover().

Adakah anda berpuas hati dengan dua penyelesaian di atas? Saya lebih suka penyelesaian jQuery , Ringkasnya, saya harap ia dapat membantu semua orang menguasai teknik regangan imej latar belakang dengan jQuery dan CSS.