Div 不显示背景色

Question

.wrap div 应该有浅橙色背景，但显示为白色。我已经尝试在 .wrap 上使用 overflow:hidden（当我绝望时在 .banner 上使用）但我不知道发生了什么。

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title> My Home Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>

    <div class="banner">
        <h1> Welcome!<span style="color:#FF009D">•‌</span><span style="color:#12E00B">•‌</span><span style="color:#FF9D00">•‌</span> </h1>
    </div>
    <div class="wrap">

        <div class="item">
            <a href="https://www.youtube.com/user/maxxchewning">
                <img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.youtube.com/user/Christianguzmanfitne">
                <img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.youtube.com/user/PhysiquesOfGreatness">
                <img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.reddit.com">
                <img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png" />
                <div class="button"></div>
            </a>
        </div>
        <div class="item">
            <a href="https://www.ebay.com">
                <img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg" />
                <div class="button"></div>
            </a>
        </div>
        <div class="item">
            <a href="https://www.facebook.com">
                <img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png" />
                <div class="button"></div>
            </a>
        </div>

    </div>

    <div class="footer"></div>
</body>

</html>

CSS

body {       
        margin-top:-3px;
}
.banner {
    width:100%;
    height:200px;
    background-color: rgba(64, 201, 255, .5);
    margin-left:-10px;
}

h1 { 
    font-size:80px;
    margin-left:30px;
    font-family:Futura;
    line-height:120px;
    color:rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.4);
    width:100%;
    letter-spacing:1px;
    padding-top:30px;

}
h1:hover { 
    font-size:80px;
    font-family:Futura;
    color: rgba(255,255,255,0.6);
    text-shadow: 2px 2px 3px rgba(64, 201, 255,0.9);
    width:100%;
    padding-top:30px;
}

}
.wrap { 
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:750px;
    margin-right:0px;
}
.item {
    float:left;
    width:25%;
    padding:10px;
    margin-left: 60px;

}

.item img {
    width:100%;
    padding-top:10px;
    max-height:200px;
    opacity:1;
}
.item img:hover {
    opacity:.4;
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);
}

.button {
    background-color:rgba(0,0,0,0.8);
    height:50px;
    width:100%;
    border-bottom-right-radius:.5em;
    border-bottom-left-radius:.5em;    
    transition: background-color 0.3s linear;     
}
.item:hover .button{
    background-color:rgba(0,0,0,0)

}

Answer 1

你应该在 .wrap 上使用 overflow:hidden 因为你是浮动 div（或 clearfix），但你的问题是一个额外的 }

h1:hover { 
  font-size:80px;
  font-family:Futura;
  color: rgba(255,255,255,0.6);
  text-shadow: 2px 2px 3px rgba(64, 201, 255,0.9);
  width:100%;
  padding-top:30px;
}

} <------------- remove

.wrap { 
  width: 100%;
  background-color: rgba(255, 190, 77, 1);
  height:750px;
  margin-right:0px;
  overflow:hidden;
}

FIDDLE

Answer 2

根据标准，只要您的元素中包含一些浮动元素，该元素就会折叠为零高度。这就是你的 wrap div 发生的事情，因为项目漂浮在里面。要解决此问题，您可以使用 overflow:auto 到 class wrap 或在所有具有 clear:both 作为其属性的项目之后放置 div。这个div里面应该没有内容：

<div style="clear:both"></div>

Answer 3

出现问题，并非一切正常。

h1:hover {
    font-size:80px;
    font-family:Futura;
    color: rgba(255,255,255,0.6);
    text-shadow: 2px 2px 3px rgba(64, 201, 255,0.9);
    width:100%;
    padding-top:30px;
}

/*} */  --- this is extra bracket you given which have an issue.
.wrap {
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:750px;
    margin-right:0px;
}

这是全部 html .

<!DOCTYPE>
<html>

<head>
    <meta charset="UTF-8">
    <title> My Home Page</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <style >
        body {
        margin-top:-3px;
}
.banner {
    width:100%;
    height:200px;
    background-color: rgba(64, 201, 255, .5);
    margin-left:-10px;
}

h1 {
    font-size:80px;
    margin-left:30px;
    font-family:Futura;
    line-height:120px;
    color:rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.4);
    width:100%;
    letter-spacing:1px;
    padding-top:30px;

}
h1:hover {
    font-size:80px;
    font-family:Futura;
    color: rgba(255,255,255,0.6);
    text-shadow: 2px 2px 3px rgba(64, 201, 255,0.9);
    width:100%;
    padding-top:30px;
}

/*}*/
.wrap {
    width: 100%;
    background-color: rgba(255, 190, 77, 1);
    height:750px;
    margin-right:0px;
}
.item {
    float:left;
    width:25%;
    padding:10px;
    margin-left: 60px;

}

.item img {
    width:100%;
    padding-top:10px;
    max-height:200px;
    opacity:1;
}
.item img:hover {
    opacity:.4;
    -webkit-transform: scale(1.2);
    -moz-transform:    scale(1.2);
    -o-transform:      scale(1.2);
    -ms-transform:     scale(1.2);
}

.button {
    background-color:rgba(0,0,0,0.8);
    height:50px;
    width:100%;
    border-bottom-right-radius:.5em;
    border-bottom-left-radius:.5em;
    transition: background-color 0.3s linear;
}
.item:hover .button{
    background-color:rgba(0,0,0,0)

}
    </style>
</head>

<body>

    <div class="banner">
        <h1> Welcome!<span style="color:#FF009D">•‌</span><span style="color:#12E00B">•‌</span><span style="color:#FF9D00">•‌</span> </h1>
    </div>
    <div class="wrap">

        <div class="item">
            <a href="https://www.youtube.com/user/maxxchewning">
                <img src="http://i.ytimg.com/vi/HrkZQ3EOmFQ/hqdefault.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.youtube.com/user/Christianguzmanfitne">
                <img src="http://i.ytimg.com/vi/zsD_7hkfEwY/hqdefault.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.youtube.com/user/PhysiquesOfGreatness">
                <img src="http://v017o.popscreen.com/VzFBeVBjMHhpRWMx_o_new-physiques-of-greatness-intro-25.jpg" />
                <div class="button"></div>
            </a>
        </div>

        <div class="item">
            <a href="https://www.reddit.com">
                <img src="https://pbs.twimg.com/profile_images/459083822470946816/VGv0AGio.png" />
                <div class="button"></div>
            </a>
        </div>
        <div class="item">
            <a href="https://www.ebay.com">
                <img src="https://pbs.twimg.com/profile_images/471350614132129793/NCDCFXva.jpeg" />
                <div class="button"></div>
            </a>
        </div>
        <div class="item">
            <a href="https://www.facebook.com">
                <img src="https://pbs.twimg.com/profile_images/3513354941/24aaffa670e634a7da9a087bfa83abe6_400x400.png" />
                <div class="button"></div>
            </a>
        </div>

    </div>

    <div class="footer"></div>
</body>

</html>

Div 不显示背景色

Div not showing background-color

html

css

background-color