「Background-Image」在CSS中不能處理「height：auto」？

我該如何去做這件事？「Background-Image」在CSS中不能處理「height：auto」？

我的HTML和CSS文件是這樣的：

HTML：

<!doctype html> 
<html> 
<head> 
    <link rel="stylesheet" href="../css/style.css" /> 
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" /> 
    <meta charset="utf-8" /> 
    <meta name="author" content="Manpreet Singh (Mannie Cupquake)"> 
    <title>Blac Tree - Home</title> 
    <script type="text/javascript"> 
    function MM_swapImgRestore() { 
     var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc; 
    } 
    function MM_preloadImages() { 
     var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); 
     var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) 
     if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} 
    } 

    function MM_findObj(n, d) { 
     var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) { 
      d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} 
     if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n]; 
     for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); 
     if(!x && d.getElementById) x=d.getElementById(n); return x; 
    } 

    function MM_swapImage() { 
     var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3) 
     if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} 
    } 
</script> 
</head> 

<body background="../imgz/template/background.png" onLoad="MM_preloadImages('../imgz/buttons/sideHomeOver.png','../imgz/buttons/sideAboutOver.png','../imgz/buttons/sideContactOver.png','../imgz/buttons/sideTwitterOver.png','../imgz/buttons/sideFacebookOver.png','../imgz/buttons/sideYouTubeOver.png')"> 
<div class="wrapper"> 
    <div class="header"> 
     <div class="headLogo"> 
     </div> 
    </div> 
    <div class="_content"> 
     <div class="sidebar"> 
      <br> 
      <a href="../home/home.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('homeButton','','../imgz/buttons/sideHomeOver.png',1)"><img src="../imgz/buttons/sideHome.png" alt="Home" id="homeButton" width="213" height="59" border="0"></a> 
      <br> 
      <br> 
      <a href="../about/about.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('aboutButton','','../imgz/buttons/sideAboutOver.png',1)"><img src="../imgz/buttons/sideAbout.png" alt="About" id="aboutButton" width="213" height="58" border="0"></a> 
      <br> 
      <br> 
      <a href="../contact/contact.htm" onMouseOut="MM_swapImgRestore()"onMouseOver="MM_swapImage('contactButton','','../imgz/buttons/sideContactOver.png',1)"><img src="../imgz/buttons/sideContact.png" alt="Contact" id="contactButton" width="213" height="58" border="0"></a> 
      <br> 
      <br> 
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('twitterButton','','../imgz/buttons/sideTwitterOver.png',1)"><img src="../imgz/buttons/sideTwitter.png" alt="Twitter" id="twitterButton" width="60" height="60" border="0"></a> 
      &nbsp; 
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('facebookButton','','../imgz/buttons/sideFacebookOver.png',1)"><img src="../imgz/buttons/sideFacebook.png" alt="Facebook" id="facebookButton" width="60" height="60" border="0"></a> 
      &nbsp; 
      <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('youtubeButton','','../imgz/buttons/sideYouTubeOver.png',1)"><img src="../imgz/buttons/sideYouTube.png" alt="YouTube" id="youtubeButton" width="60" height="60" border="0"></a> 
      <br> 
      <br> 
      <div class="address"> 
       1234 Test Road<br> 
       West Chester, OH<br> 
       45069-XX<br> 
       (513) XXX-XXXX<br> 
       [email protected] 
      </div> 
      <br> 
      <div class="gMap"> 
      </div> 
     </div> 
     <div class="contentWrapper"> 
      <div class="ribbon"> 
       <div class="ribbonText"> 
        <div class="font1"> 
         <br> 
        </div> 
        About 
       </div> 
      </div> 
      <div class="content"> 
       <p> 
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a justo ac lectus ornare mattis. Pellentesque volutpat cursus lectus non rhoncus.Maecenas pulvinar, tellus sed laoreet tristique, mauris felis luctus magna, in aliquam ante diam in lectus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam sed purus et ipsum auctor sollicitudin. Sed enim metus, mollis vel dignissim eu, vestibulum id libero. Donec convallis nulla malesuada orci viverra sagittis. Maecenas quis eleifend augue. Proin eu tortor quis lorem suscipit iaculis et feugiat mi. Nullam consequat nulla at nisi ultrices fermentum. Praesent scelerisque lacus et erat mattis condimentum at sed nunc. Cras facilisis nibh quis odio rhoncus lobortis. 
       <br> 
       <br> 
       Vestibulum consequat leo ac enim faucibus vitae cursus leo condimentum. Pellentesque nec dui quis mauris elementum molestie. Donec pellentesque, leo accumsan tincidunt venenatis, urna lectus consequat sapien, sit amet feugiat turpis mi ut sem. Cras id metus et ipsum viverra bibendum eget nec urna. Vestibulum ac metus nec tellus suscipit dignissim vel pellentesque erat. Suspendisse in urna nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aenean feugiat feugiat aliquam. Duis fermentum massa lectus. Praesent ultricies tincidunt quam a sagittis. Pellentesque interdum dolor non diam ullamcorper suscipit. Proin tempus, est et cursus malesuada, diam lectus suscipit quam, non porttitor augue odio quis massa. Curabitur sit amet gravida lorem. Nullam venenatis, purus vitae egestas semper, arcu urna hendrerit felis, at molestie nisi orci eu urna. Sed venenatis, sapien rhoncus blandit sagittis, nunc felis mollis ipsum, eget aliquam felis turpis et magna. Morbi sapien enim, auctor id venenatis sed, pretium et arcu. 
       </p> 
      </div> 
     </div> 
    </div> 
    <div class="footer"> 
     <br> 
     <br> 
     Blac Tree © All rights Reserved 2011-2012 
    </div> 
</div> 
</body> 
</html>

CSS：

@font-face { 
    font-family: typo_pro_sbi; 
    src: url('font/typo_pro_sbi.ttf'); 
} 
@font-face { 
    font-family: typo_pro_eb; 
    src: url('font/typo_pro_eb.ttf'); 
} 
@font-face { 
    font-family: bebas_neue; 
    src: url('font/bebas_neue.otf'); 
} 
.wrapper { 
    height: auto; 
    width: 950px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 35px; 
} 
.wrapper .header { 
    background: url(../imgz/template/headerBg.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    height: 143px; 
    width: 950px; 
} 
.wrapper .header .headLogo { 
    background: url(../imgz/template/headerLogo.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    margin-left: 85px; 
    height: 136px; 
    width: 214px; 
} 
.wrapper ._content { 
    background-image: url(../imgz/template/contentBg.png); 
    height: auto; 
    width: 950px; 
} 
.wrapper ._content .sidebar { 
    float: left; 
    height: auto; 
    width: 314px; 
    text-align: center; 
} 
.wrapper ._content .sidebar .homeButton,.wrapper ._content .sidebar .aboutButton,.wrapper ._content .sidebar .contactButton,.wrapper ._content .sidebar .twitterButton,.wrapper ._content .sidebar .facebookButton,.wrapper ._content .sidebar .youtubeButton { 
    border: 0px; 
} 
.wrapper ._content .sidebar .address { 
    text-align: left; 
    margin-left: 60px; 
    font-family: typo_pro_sbi; 
    color: #9c9c9c; 
    font-size: 18px; 
} 
.wrapper ._content .sidebar .gMap { 
    background-image: url(../imgz/buttons/gMap.png); 
    background-repeat: no-repeat; 
    background-position: center center; 
    text-align: center; 
    height: 207px; 
    width: 207px; 
    margin-left: auto; 
    margin-right: auto; 
} 
.wrapper ._content .contentWrapper { 
    background: url(../imgz/template/contentShadow.png); 
    background-repeat: repeat-y; 
    float: left; 
    height: auto; 
    width: 563px; 
    color: #CCCCCC; 
} 
.wrapper ._content .contentWrapper .ribbon { 
    background-image: url(../imgz/template/topRibbon.png); 
    background-repeat: no-repeat; 
    text-align: center; 
    height: 113px; 
    width: 560px; 
    margin-top: 20px; 
} 
.wrapper ._content .contentWrapper .ribbon .ribbonText { 
    font-family: typo_pro_eb; 
    font-size: 32px; 
    color: #abd7ff; 
} 
.wrapper ._content .contentWrapper .ribbon .ribbonText .font1 { 
    font-size: 22px; 
} 
.wrapper ._content .contentWrapper .content { 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 10px; 
    height: auto; 
    width: 475px; 
    overflow: auto; 
    text-align: left; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 16px; 
    font-style: normal; 
} 
.wrapper .footer { 
    background-image: url(../imgz/template/footerBg.png); 
    background-repeat: no-repeat; 
    height: 80px; 
    width: 950px; 
    float: left; 
    text-align: center; 
    font-family: bebas_neue; 
    font-size: 16px; 
    color: #323232; 
}

的「_content」類不顯示背景圖片是應該，任何人都可以向我解釋爲什麼？指定的背景圖像出現在給元素指定高度時，我嘗試使用「min-height」，但只有指定的最小高度顯示背景圖像，我該如何解決這個問題？

來源

2012-03-08 Nyanja

可能是因爲它的所有兒童都設置爲float: left這意味着你需要把你的._content像overflow: auto得到它的認可和包裹的浮動元素（而不是被剛剛高度爲0）。

更多說明：浮動需要清除，以便他們給他們的包含元素的高度。有各種方法清除浮動，但最簡單的方法是在包含元素上設置overflow屬性。

來源

2012-03-08 02:00:58 ScottS

非常感謝斯科特！ :) – Nyanja 2012-03-08 02:10:13

「Background-Image」在CSS中不能處理「height：auto」？

回答

相關問題