jQuery와 CSS를 사용하여 배경 이미지 늘리기_jquery

이제 WEB 페이지 디자인에서 큰 배경 이미지를 사용하는 것이 유행인데, 큰 배경 이미지를 사용하여 늘어나는 효과를 만드는 방법을 알고 계시나요? 즉, 고정된 크기의 배경 이미지를 사용하고 컴퓨터 바탕 화면 배경 무늬 효과처럼 페이지의 브라우저 크기에 맞춰 늘어나게 합니다. 이 기사에서는 jQuery와 CSS를 사용하여 배경 이미지 늘이기 효과를 얻는 방법을 안내합니다.

타일링 대신 배경 이미지를 늘립니다. 타일 효과에 주의하세요. CSS 배경 반복을 사용하여 배경 이미지의 타일 효과를 구현할 수 있습니다. 이 효과는 일부 아방가르드 페이지 디자인, 특히 일부 독립 페이지에서 널리 사용되었습니다. 로그인 페이지에서 늘어난 배경 이미지 효과를 사용하는 것이 일반적입니다.
현재 배경 이미지의 늘이기 효과를 얻기 위한 두 가지 솔루션이 있습니다. 하나는 CSS입니다. 우리는 background-size:cover를 사용하여 이미지의 늘이기 효과를 얻을 수 있습니다. 그래서 우리는 background-size를 지원하지 않습니다. Microsoft 필터 효과를 사용하지만 IE6에서는 이를 지원하지 않습니다. 결국 IE6을 사용하는 일부 미흡한 사용자가 있습니다. 또 다른 해결책은 브라우저 호환성 문제를 완전히 해결한 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() 함수는 배경 이미지의 크기를 동적으로 설정합니다. 페이지가 로드되고 브라우저 창이 변경되면 배경 이미지가 늘어날 수 있습니다. . 페이지 준비 및 크기 조정이 모두 Cover() 함수를 호출하는 효과가 있습니다.

위의 두 가지 솔루션에 만족하시나요? 나는 jQuery 솔루션 , 을 선호합니다. 즉, 모든 사람이 jQuery와 CSS를 사용하여 배경 이미지를 늘리는 기술을 더 잘 익히는 데 도움이 되기를 바랍니다.