个人中心
gpt4 book ai didi

html - "Background-Image"不能在 CSS 中使用 "height:auto"？

转载 作者：行者123 更新时间：2023-11-28 14:09:49 25 4
gpt4 key购买 nike

我该怎么做？

我的 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”类没有显示它应该显示的背景图片，谁能向我解释为什么？当我给元素一个特定的高度时出现指定的背景图像，我尝试使用“最小高度”，但只有指定的最小高度显示背景图像，我该如何解决这个问题？

最佳答案

可能是因为它的所有子项都设置为 float: left，这意味着您需要在 ._content 上添加类似 overflow: auto 的内容让它识别并包装那些 float 元素(而不是只有 0 高度)。

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

关于html - "Background-Image"不能在 CSS 中使用 "height:auto"？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9611856/

25 4 0
文章推荐： html - 选择元素在嵌套 div 中不起作用
文章推荐： html - 我怎样才能将这个下拉列表绝对定位在溢出滚动父级中？
文章推荐： css - Thymeleaf 模板通过转义 CSS 文件中的井号来解析模型属性
文章推荐： html - 带有 Div 和 Float 的 CSS 间距
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com