我在做什么错?
想法:
由于某种原因,尽管页脚不是封面的子级,但添加封面div会使页脚为半透明。
抑制封面的“不透明性”也使页脚也不透明。
任何想法如何解决这个问题?
JSFiddle:https://jsfiddle.net/a81x07uk/
<!DOCTYPE html>
<html>
<style>
body{
background: url("http://1.bp.blogspot.com/-Hjx9f70ASIY/UDiMt1gKaPI/AAAAAAAACXA/QBrC0nootsw/s1600/green.field.wallpaper.2.jpg") no-repeat fixed center;
}
.cover {
background: green;
width: 100%;
height: 90%;
position: fixed;
opacity: .5;
left: 0%;
top: 0%;
}
.footer {
background: white;
width: 100%;
height: 10%;
position: fixed;
bottom: 0%;
left: 0%;
}
</style>
<body>
<!-- rectangle to cover the picture -->
<div class="cover"/>
<!-- rectangle to cover the bottom part -->
<div class="footer">test</div>
</body>
</html>
<html>
<style>
body{
background: url("http://1.bp.blogspot.com/-Hjx9f70ASIY/UDiMt1gKaPI/AAAAAAAACXA/QBrC0nootsw/s1600/green.field.wallpaper.2.jpg") no-repeat fixed center;
}
.cover {
background: green;
width: 100%;
height: 90%;
position: fixed;
opacity: .5;
left: 0%;
top: 0%;
}
.footer {
background: white;
width: 100%;
height: 10%;
position: fixed;
bottom: 0%;
left: 0%;
}
</style>
<body>
<!-- rectangle to cover the picture -->
<div class="cover"></div>
<!-- rectangle to cover the bottom part -->
<div class="footer">test</div>
</body>
</html>
<div>
不是自动闭合的。正如Fabian所写,这使页脚成为掩盖的孩子。谢谢,这让我发疯了!