Question

是否可以创建类似图片的内容？（所以一个带有图像的标题，在它的底部是一个半透明的导航栏（所以我可以看到图片的底部）

Answer 1

我所做的是使用 background-image 将图像添加到标题的背景中，使用空白 div 将导航栏移动到底部，然后添加了 RGBA 颜色（红色、绿色、蓝色、 alpha，alpha 表示透明度）到导航栏的 background-color 上。这是我的代码：

Codesandbox Sandbox

或

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

header {
    border: 5px solid black;
    height: 400px;
    background-image: url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format");
    /* background-size: cover; */
    background-repeat: no-repeat;
    background-size: 100% 100%;
}

div#whitespace {
    height: calc(100% - 40px); /* 20 px is the height of the navbar */
}

nav {
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.35);
    height: 40px;
}

a {
    /* text-decoration: none; */
    color: black;
    font-weight: bold;
}

<header>
  <div id="whitespace"></div>
  <nav>
    <a href=".">Home</a>
    <a href=".">Link 1</a>
    <a href=".">Link 2</a>
    <a href=".">Link 3</a>
  </nav>
</header>

我在这里所做的是用 background-image 的 url("https://images.unsplash.com/7/Top_view.jpg?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format") 定义标题元素。现在 url() 是一个 CSS 函数，它允许您包含一个文件，即我们的标题图像。然后，我们将 background-size 设置为 100% 100%，因此图像将调整大小以适合我们的标题的尺寸并完全填充标题。我们还将 background-repeat 设置为 no-repeat 以便图像不会重复（尽管这是不必要的，因为图像已经填充了所有标题元素）。然后，我向空白 div 添加样式，使 div 的高度为 100%（或我们标题的所有高度）并减去 div 的高度（40px），然后我使用 CSS 函数 calc 这允许我做一些 CSS 单元的数学运算。因此，通过使用此空白 div，它将导航栏向下推到底部，以便正确放置。最后，对于我们的导航栏，我使用 flexbox 来对齐项目并均匀地间隔链接。然后，我将背景颜色设置为 rgba(255, 255, 255, 0.35)。这是 rgb(255, 255, 255，它是白色的，但现在我们将透明度 (alpha) 值设置为 0.35，使颜色透明，以便我们可以看到导航栏下方的背景图像。

带有透明导航栏的标题

1 个答案: