在我的页面顶部获得一个透明的导航

Question

我的目标是创建一个具有透明背景的导航栏，左侧边缘带有徽标，右侧边缘带有“工作”和“关于”。请原谅我，我的页面现在没有响应，所以正确的结果只会出现在大视口中。我用容器类在我的 div 中创建了一些内容，并希望使用 flexbox 将导航置于顶部。我需要帮助如何从这里继续。我正在尝试复制 this 设计。

* {
  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

你可以试试这个：

* {
  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>