erhalten Sie ein transparentes Nav auf meiner Seite

Question

Mein Ziel ist es, eine Navbar mit transparentem Hintergrund, mit Logo auf der linken Seite und 'arbeiten' und 'über' am rechten Rand der Navigationsleiste haben. Verzeihen Sie, meine Seite reagiert momentan nicht, sodass korrekte Ergebnisse nur in einem großen Ansichtsfenster angezeigt werden. Ich habe etwas Inhalt in meinem Div mit Containerklasse erstellt und möchte, dass das Nav mit flexbox ganz oben steht. Ich brauchte Hilfe, um von hier fortzufahren. Ich versuche, this Design zu replizieren.

* { 
 
    box-sizing: boder-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
    background-color: pink; 
 
    width: 100%; 
 
    display: flex; 
 
    justify-content: space-around; 
 
    flex-direction: row; 
 
    max-width: 100px; 
 
    max-height: 100px; 
 
    align-content: right; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    background-image: url("http://res.cloudinary.com/pixelplus/image/upload/v1510295441/black-and-white-photography-1024x584_niptgw.jpg"); 
 
    background-repeat: round; 
 
    height: 100vh; 
 
    width: 30vw; 
 
} 
 

 
.headline { 
 
    font-family: 'Neuton', serif; 
 
    font-size: 70px; 
 
    max-width: 100px; 
 
    position: absolute; 
 
    top: 15%; 
 
    left: 33%; 
 
} 
 

 
.summary { 
 
    font-size: 20px; 
 
    max-width: 400px; 
 
    position: absolute; 
 
    top: 65%; 
 
    left: 38%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <nav><a class="logo">logo</a><a class="work">work</a><a class="about">about</a></nav> 
 
    <div class="image"></div> 
 
    <div class="headline"> 
 
     <p>Lorem Ipsum</p> 
 
    </div> 
 
    <div class="summary"> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

Sie können mit diesem versuchen:

* { 
 
    box-sizing: boder-box; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
nav { 
 
position: absolute; 
 
width: 100%; 
 
background: transparent; 
 
display: flex; 
 
justify-content: space-around; 
 
flex-direction: row; 
 
max-height: 100px; 
 
align-content: right; 
 
} 
 

 
nav .logo{margin-left: 15px} 
 
nav .work{ 
 
    margin-left: auto; 
 
    margin-right: 15px; 
 
} 
 
nav .about{margin-right: 15px;} 
 

 
.container { 
 
    display: flex; 
 
    position: relative; 
 
} 
 

 
.image { 
 
    background-image: url("http://res.cloudinary.com/pixelplus/image/upload/v1510295441/black-and-white-photography-1024x584_niptgw.jpg"); 
 
    background-repeat: round; 
 
    height: 100vh; 
 
    width: 30vw; 
 
} 
 

 
.headline { 
 
    font-family: 'Neuton', serif; 
 
    font-size: 70px; 
 
    max-width: 100px; 
 
    position: absolute; 
 
    top: 15%; 
 
    left: 33%; 
 
} 
 

 
.summary { 
 
    font-size: 20px; 
 
    max-width: 400px; 
 
    position: absolute; 
 
    top: 65%; 
 
    left: 38%; 
 
}

<div class="main"> 
 
    <div class="container"> 
 
    <nav><a class="logo">logo</a><a class="work">work</a><a class="about">about</a></nav> 
 
    <div class="image"></div> 
 
    <div class="headline"> 
 
     <p>Lorem Ipsum</p> 
 
    </div> 
 
    <div class="summary"> 
 
     <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis</p> 
 
    </div> 
 
    </div> 
 
</div>