Question

http://www.kieran-smith.co.uk/

嗨，

希望我能够正确解释这一点。在上面的网站上，你应该看到一个浅灰色背景的固定导航。如果您滚动背景，不透明度似乎发生了变化，但我不确定原因，每个背景图片的不透明度为0.7，但是这是在单独的div中设置而不是在导航中。

.kimg1, .kimg2, .kimg3 {
position:relative;
opacity:0.70;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
background-attachment:fixed;
}

.kimg1 {
    background-image:url("http://www.kieran-smith.co.uk/img/image1.png");
    min-height:100%;
}

.top-menu {
position:fixed;
top:0;
background:#dddddd;
color:#444444;
width:100%;
padding:10px;
}

Answer 1

我认为你想要导航不改变颜色的问题，所以要修复它只是添加z-index：10;到.top菜单，所以它看起来像这样

.top-menu {
position:fixed;
top:0;
background:#dddddd;
color:#444444;
width:100%;
padding:10px;
z-index: 10;

}

Answer 2

＆＃13;

html, body {
	margin:0;
	font-family:'Droid Sans', sans-serif;
	height:100%;
	font-size:16px;
	line-height:1.8em;
	font-weight:400;
	color:#666;
}

.kimg1, .kimg2, .kimg3 {
	position:relative;
	opacity:0.70;
	background-position:center;
	background-size:cover;
	background-repeat:no-repeat;
	background-attachment:fixed;
}

.kimg1 {
	background-image:url("http://www.kieran-smith.co.uk/img/image1.png");
	min-height:100%;
	background-repeat:repeat-x;
	background-size:contain;
}

.kimg2 {
	background-image:url("http://www.kieran-smith.co.uk/img/image1.png");
	min-height:400px;
}

.kimg3 {
	background-image:url("http://www.kieran-smith.co.uk/img/image1.png");
	min-height:400px;
}

.section {
	text-align:center;
	padding:50px 80px;
}

.section-light {
	background:#f4f4f4;
	color:#666;
}

.section-dark {
	background-color:#282e34;
	color:#ddd;
}

.ktext {
	position:absolute;
	top:50%;
	width:100%;
	text-align:center;
	color:#111;
	font-size:27px;
	letter-spacing:8px;
	text-transform:uppercase;
}

.ktext .border {
	background-color:#111;
	color:#fff;
	padding:20px;
}

.ktext .border.trans {
	background-color:transparent;
}

.top-menu {
	position:fixed;
	top:0;
	background:rgba(221,221,221, 0.8);
	color:#444444;
	width:100%;
	padding:10px;
  z-index:1000;
}

@media(max-width:568px) {
	.kimg1, .kimg2, .kimg3 {
		background-attachment:scroll;
	}
}

＆＃13;

<body>
	<nav class="top-menu">
	  	<a href="#">Home</a>
	  	<a href="">Page One</a>
	  	<a href="">Page Two</a>
	  	<a href="">Page Three</a>
	</nav>

	  <div class="kimg1">
	  	<div class="ktext">
	  		<span class="border">
				Kieran Smith
	  		</span>
	  	</div>
	  </div>

	  <section class="section section-light">
	  	<h2>Section One</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem labore ex, eius doloribus. Omnis maxime illum ad dolorem. Numquam qui autem vitae quibusdam fugit distinctio quam labore sapiente at doloribus eos neque quisquam dicta incidunt, mollitia itaque quaerat facere, maxime nihil quae totam enim quidem iure tempora inventore? Aperiam facere veritatis porro quas nostrum laborum doloremque autem, error in temporibus exercitationem nesciunt animi illum voluptatibus ipsa ducimus adipisci fugit repellendus, ut nemo blanditiis commodi eos tenetur molestias? Ipsa consectetur laudantium quibusdam cum, nesciunt ducimus saepe soluta unde nihil sunt neque, aspernatur officia necessitatibus delectus eius qui ut a iusto velit?
		</p>
	  </section>

	  <div class="kimg2">
	  	<div class="ktext">
	  		<span class="border trans">
				Image Two Text
	  		</span>
	  	</div>
	  </div>


	  <section class="section section-dark">
	  	<h2>Section Two</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem labore ex, eius doloribus. Omnis maxime illum ad dolorem. Numquam qui autem vitae quibusdam fugit distinctio quam labore sapiente at doloribus eos neque quisquam dicta incidunt, mollitia itaque quaerat facere, maxime nihil quae totam enim quidem iure tempora inventore? Aperiam facere veritatis porro quas nostrum laborum doloremque autem, error in temporibus exercitationem nesciunt animi illum voluptatibus ipsa ducimus adipisci fugit repellendus, ut nemo blanditiis commodi eos tenetur molestias? Ipsa consectetur laudantium quibusdam cum, nesciunt ducimus saepe soluta unde nihil sunt neque, aspernatur officia necessitatibus delectus eius qui ut a iusto velit?
		</p>
	  </section>


	  <div class="kimg3">
	  	<div class="ktext">
	  		<span class="border trans">
				Image Three Text
	  		</span>
	  	</div>
	  </div>

	  <section class="section section-dark">
	  	<h2>Section Three</h2>
		<p>
			Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem labore ex, eius doloribus. Omnis maxime illum ad dolorem. Numquam qui autem vitae quibusdam fugit distinctio quam labore sapiente at doloribus eos neque quisquam dicta incidunt, mollitia itaque quaerat facere, maxime nihil quae totam enim quidem iure tempora inventore? Aperiam facere veritatis porro quas nostrum laborum doloremque autem, error in temporibus exercitationem nesciunt animi illum voluptatibus ipsa ducimus adipisci fugit repellendus, ut nemo blanditiis commodi eos tenetur molestias? Ipsa consectetur laudantium quibusdam cum, nesciunt ducimus saepe soluta unde nihil sunt neque, aspernatur officia necessitatibus delectus eius qui ut a iusto velit?
		</p>
	  </section>


	  <div class="kimg1">
	  	<div class="ktext">
	  		<span class="border">
				Kieran Smith
	  		</span>
	  	</div>
	  </div>
	</body>

＆＃13;

我将您的Css菜单顶级菜单改为

.top-menu {
position:fixed;
top:0;
background:rgba(221,221,221, 0.8);
color:#444444;
width:100%;
padding:10px;
z-index:1000;
}

还更新了您的JS fiddle

这就是你想要的吗？

固定导航根据背景改变不透明度

2 个答案: