Question

我尝试了一些具有相同标题的问题的解决方案，但它们似乎都不适合我。它们都只会导致内容滚动，打破页脚位置并阻止实际页面滚动，我需要更改页眉大小。

我在这里创建了一个关于我网站要点的小提琴： https://jsfiddle.net/bsummers/nstjmxy5/1/

我希望找到一种方法，不要在标题后面滚动显示任何白色内容框。我希望它能够消失在导航栏后面。

已经和这个人搏斗了2天，并且没有想法......

body {
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top;
    padding: 0;
    margin: 0;
}

header{
    background: rgba(0,0,0,0.5);
    float: left;
    width: 100%;
    position: fixed;
    z-index: 10;
}
/* Sizes for the bigger menu */
header.large{}
header.large img{
    width: 354px;
    height: 105px;
}
/* Sizes for the smaller menu */
header.small{}
header.small img{ 
    width: 250px; 
    height: auto; 
}
header, nav, header img{
  transition: all 1s;
  -moz-transition: all 1s; /* Firefox 4 */
  -webkit-transition: all 1s; /* Safari and Chrome */
  -o-transition: all 1s; /* Opera */
}

nav{
  background: #444;
  line-height: 50px;
}

section.content {
    background: #fff none repeat scroll 0 0;
    box-sizing: border-box;
    padding: 0;
    position: relative;
    top: 160px;
    height: 1000px;
    
    max-width: 80%;
    margin: 0 auto;
}

main#content {
    background: blue;
    display: table-cell;
    margin: 0;
    padding-right: 20px;
    width: 100%;
}
aside {
    background: red;
    display: table-cell;
    min-width: 200px;
    vertical-align: top;
    width: 200px;
}

footer{
    background: green;  
    position: relative;
    top: 160px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<header class="fullwidth large" role="banner">
	<div class="container">
    
<a id="logo" href="#" rel="home"><img class="logo" src="http://www.cdldodgeball.ca/cms/wp-content/themes/CDL/images/logo.png" /></a>
    
			<nav role="navigation">
				Navigation
			</nav>
		</div>  
</header>


<section class="content">
		<main role="main" id="content">
      content
    </main>
    <aside>
      sidebar
    </aside>
</section>



<footer role="contentinfo" class="fullwidth">
	<div class="container">
    FOOTER        
	</div>
</footer>

{{1}}

Answer 1

不更改html结构的一个选项是在标题上添加相同的背景图片，并将rgba()不透明度应用于.container：

JS Fiddle

body {
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top;
    padding: 0;
    margin: 0;
}

header{
    background: transparent url("http://www.cdldodgeball.ca/new/wp-content/themes/party/images/background2.png") no-repeat fixed center top;
    float: left;
    width: 100%;
    position: fixed;
    z-index: 10;
}
.container {
  background: rgba(0,0,0,.5);
}

隐藏透明标题下的滚动页面内容

1 个答案: