を背景

-1

こんにちは、私はこれを適切に説明することができるよ

希望に応じて、不透明度を変更するナビゲーションを修正しました。上記のウェブサイトでは、明るい灰色の背景を持つ固定Navが表示されます。背景をスクロールすると不透明度が変わるように見えますが、理由はわかりませんが、それぞれの背景画像の不透明度は0.7ですが、これはnavではなくdiv内に設定されています。

https://jsfiddle.net/2aLwazks/

.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; 
}

出典

2017-07-13 Kieran Smith

[Stack Snippet]（https://stackoverflow.blog/2014/09/16/introducing-runnable-javascript-css-and-html-code-snippets/）形式で[mcve]を入力してください。可能であれば、外部サイトへのリンクではなく、 – domsson

私はあなたの色を変更しないようにNAVを欠けている質問、これだけのzインデックスを追加することを修正することで思う：10; .top-メニューには、この

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

}

出典

2017-07-13 14:29:20

うん、私はZ-インデックスを忘れていたとは思わない！ –

html, body { 
 
\t margin:0; 
 
\t font-family:'Droid Sans', sans-serif; 
 
\t height:100%; 
 
\t font-size:16px; 
 
\t line-height:1.8em; 
 
\t font-weight:400; 
 
\t color:#666; 
 
} 
 

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

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

 
.kimg2 { 
 
\t background-image:url("http://www.kieran-smith.co.uk/img/image1.png"); 
 
\t min-height:400px; 
 
} 
 

 
.kimg3 { 
 
\t background-image:url("http://www.kieran-smith.co.uk/img/image1.png"); 
 
\t min-height:400px; 
 
} 
 

 
.section { 
 
\t text-align:center; 
 
\t padding:50px 80px; 
 
} 
 

 
.section-light { 
 
\t background:#f4f4f4; 
 
\t color:#666; 
 
} 
 

 
.section-dark { 
 
\t background-color:#282e34; 
 
\t color:#ddd; 
 
} 
 

 
.ktext { 
 
\t position:absolute; 
 
\t top:50%; 
 
\t width:100%; 
 
\t text-align:center; 
 
\t color:#111; 
 
\t font-size:27px; 
 
\t letter-spacing:8px; 
 
\t text-transform:uppercase; 
 
} 
 

 
.ktext .border { 
 
\t background-color:#111; 
 
\t color:#fff; 
 
\t padding:20px; 
 
} 
 

 
.ktext .border.trans { 
 
\t background-color:transparent; 
 
} 
 

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

 
@media(max-width:568px) { 
 
\t .kimg1, .kimg2, .kimg3 { 
 
\t \t background-attachment:scroll; 
 
\t } 
 
}

<body> 
 
\t <nav class="top-menu"> 
 
\t \t <a href="#">Home</a> 
 
\t \t <a href="">Page One</a> 
 
\t \t <a href="">Page Two</a> 
 
\t \t <a href="">Page Three</a> 
 
\t </nav> 
 

 
\t <div class="kimg1"> 
 
\t \t <div class="ktext"> 
 
\t \t \t <span class="border"> 
 
\t \t \t \t Kieran Smith 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <section class="section section-light"> 
 
\t \t <h2>Section One</h2> 
 
\t \t <p> 
 
\t \t \t 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? 
 
\t \t </p> 
 
\t </section> 
 

 
\t <div class="kimg2"> 
 
\t \t <div class="ktext"> 
 
\t \t \t <span class="border trans"> 
 
\t \t \t \t Image Two Text 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div> 
 

 

 
\t <section class="section section-dark"> 
 
\t \t <h2>Section Two</h2> 
 
\t \t <p> 
 
\t \t \t 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? 
 
\t \t </p> 
 
\t </section> 
 

 

 
\t <div class="kimg3"> 
 
\t \t <div class="ktext"> 
 
\t \t \t <span class="border trans"> 
 
\t \t \t \t Image Three Text 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div> 
 

 
\t <section class="section section-dark"> 
 
\t \t <h2>Section Three</h2> 
 
\t \t <p> 
 
\t \t \t 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? 
 
\t \t </p> 
 
\t </section> 
 

 

 
\t <div class="kimg1"> 
 
\t \t <div class="ktext"> 
 
\t \t \t <span class="border"> 
 
\t \t \t \t Kieran Smith 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </div> 
 
\t </body>

ようになりますので、私は

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

にあなたのCSSメニュートップメニュークラスを変更しましたあなたも更新しましたJS fiddle

それはあなたが望むものですか？

出典

2017-07-13 14:30:07 hansTheFranz

うん、私はZ-インデックスとして明白な何かを逃したとは信じられない... –

答えて

関連する問題