Div没有显示背景颜色

时间：2015-01-02 05:11:31

标签： html css background-color

.wrap div应该是浅橙色背景，但它显示为白色。我已尝试在overflow:hidden上使用.wrap（当我绝望时使用.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)

}

3 个答案:

答案 0 :(得分：0)

你应该在overflow:hidden上使用.wrap，因为你是浮动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

答案 1 :(得分：0)

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

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

答案 2 :(得分：0)

存在问题，而不是一切都很好。

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>
相关问题
最新问题