HTML 전체 화면 배경 방법 요약-HTML 튜토리얼-php.cn

HTML 전체 화면 배경 방법 요약

高洛峰

풀어 주다： 2017-03-28 11:50:22

원래의

3107명이 탐색했습니다.

전체 화면 배경은 현재 인기 있는 웹 디자인 스타일이며 이러한 전체 화면 배경을 구현하는 방법에는 기본적으로 두 가지가 있습니다. 하나는 CSS를 통해 달성됩니다(CSS3.0은 풍부한 CSS 스타일 제어를 위해 더 많은 기능을 제공합니다). ); 또 하나는 익숙한 자바스크립트를 통해 구현하는 것인데, 여기서는 코드의 편의를 위해 jQuery를 직접 사용합니다. jQuery가 언급되었기 때문에 우리는 jQuery로 작성할 수 있기 때문에 인터넷에서 우리가 사용할 수 있도록 유사하게 작성된 jQuery 플러그인이 있어야 한다고 상상할 수 있습니다.

방법 1, 새로운 CSS3.0 스타일 기능을 사용하여 베이징 전체 화면 구현(ie6-8은 지원되지 않음)

html {
      background: url(images/bg.jpg) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
}

로그인 후 복사

또는:

html{
    background:url('background.jpg') no-repeat center center;
    min-height:100%;
    background-size:cover;
}
body{
    min-height:100%;
}

로그인 후 복사

원리: html 설정 최소 높이는 100%입니다. CSS3에서 background-size:cover를 사용하여 배경 이미지가 전체 화면 모드를 덮도록 설정하세요.

호환성:

Safari 3+

Chrome Everything+

IE 9+

Opera 10+

Firefox 3.6+

방법 2: jQuery를 사용하여

HTML 코드 구현:

<img src="images/bg.jpg" id="bg" alt="">

로그인 후 복사

CSS 코드:

#bg { position: fixed; top: 0; left: 0; }
.bgwidth { width: 100%; }
.bgheight { height: 100%; }

로그인 후 복사

jQuery 코드:

$(window).load(function() {  
    var theWindow        = $(window),
        $bg              = $("#bg"),
        aspectRatio      = $bg.width() / $bg.height();
                                                                                                                                                                            
    function resizeBg() {
                                                                                                                                                    
        if ( (theWindow.width() / theWindow.height()) < aspectRatio ) {
            $bg
                .removeClass()
                .addClass(&#39;bgheight&#39;);
        } else {
            $bg
                .removeClass()
                .addClass(&#39;bgwidth&#39;);
        }
                                                                                                                                                                
    }
                                                                                                                                                                            
    theWindow.resize(resizeBg).trigger("resize");
});

로그인 후 복사

호환성:

IE7+

모든 데스크톱 브라우저

방법 2, jQuery를 사용하여 구현(첨부) [jQuery 플러그인 jQuery.fullBg 사용]

먼저 플러그인 코드가 나옵니다.

/**
 * jQuery.fullBg
 * Version 1.0
 * Copyright (c) 2010 c.bavota - http://bavotasan.com
 * Dual licensed under MIT and GPL.
 * Date: 02/23/2010
**/
(function($) {
  $.fn.fullBg = function(){
    var bgImg = $(this);      
                                                   
    function resizeImg() {
      var imgwidth = bgImg.width();
      var imgheight = bgImg.height();
                                                           
      var winwidth = $(window).width();
      var winheight = $(window).height();
                                                       
      var widthratio = winwidth / imgwidth;
      var heightratio = winheight / imgheight;
                                                           
      var widthdiff = heightratio * imgwidth;
      var heightdiff = widthratio * imgheight;
                                                       
      if(heightdiff>winheight) {
        bgImg.css({
          width: winwidth+'px',
          height: heightdiff+'px'
        });
      } else {
        bgImg.css({
          width: widthdiff+'px',
          height: winheight+'px'
        });   
      }
    }
    resizeImg();
    $(window).resize(function() {
      resizeImg();
    });
  };
})(jQuery)

로그인 후 복사

이 코드에는 약간의 CSS만 필요합니다.

.fullBg {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
}
#maincontent {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 50;
}

로그인 후 복사

배경을 고정된 상태로 유지하려면 .fullBG CSS를 다음과 같이 변경할 수 있습니다.

.fullBg {
  position: fixed;
  top: 0;
  left: 0;
  overflow: hidden;
}

로그인 후 복사

HTML 마크업의 경우 ID나 클래스가 포함된 이미지 태그만 추가할 수 있지만 기본 콘텐츠가 포함된 div도 추가해야 합니다. 그렇지 않으면 제대로 작동하지 않습니다. 최소한:

<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
  <!-- Your site content goes here -->
</div>

로그인 후 복사

jQuery 함수를 호출하려면 웹페이지 하단, 닫는 본문 태그 바로 앞에 다음을 추가하세요.

<script type="text/javascript">
$(window).load(function() {
    $("#background").fullBg();
});
</script>

로그인 후 복사

다시 한번 말씀드리지만, 이 플러그인은 매우 간단하므로 전혀 필요하지 않습니다. 옵션을 사용할 수 있습니다. 그냥 하는 일만 합니다.

위 내용은 HTML 전체 화면 배경 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!