文章/答案/技术大牛

发布

社区首页 >问答首页 >在CSS中"Background-Image“不能处理"height:auto”吗？

问在CSS中"Background-Image“不能处理"height:auto”吗？
EN

Stack Overflow用户

提问于 2012-03-08 09:48:00

回答 1查看 533关注 0票数 0

我该怎么做呢？

我的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>
                info@blactree.org
            </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 "，但只有指定的最小高度显示了背景图像，我该如何解决这个问题？

html

css

image

background

回答 1

Stack Overflow用户

回答已采纳

发布于 2012-03-08 10:00:58

可能是因为它的所有子元素都被设置为float: left，这意味着您需要在._content上放入类似overflow: auto的内容，以便让它识别和包装这些浮动元素(而不仅仅是0高度)。

进一步解释:需要清除浮点数，以便它们为其包含的元素提供高度。清除浮点数的方法有多种，但最简单的方法是在包含的元素上设置overflow属性。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/9611856

复制

相似问题

问在CSS中"Background-Image“不能处理"height:auto”吗？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中"Background-Image“不能处理"height:auto”吗？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中"Background-Image“不能处理"height:auto”吗？
EN