如何使背景图像覆盖整个背景，而不重复图像，并且导航链接位于行的右上角

Question

body{
display: flex;
background: url("images/benzo.jpg") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: contain;
background-attachment: fixed;
}

这是我插入背景图像的代码示例

Answer 1

background-size: cover是您想要用图像覆盖整个页面的内容：

body{
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png") no-repeat center;
height: 100vh;
color: #fff;
min-height: 500px;
background-size: cover;
background-attachment: fixed;

关于你的导航栏，我不完全确定你是如何设置HTML的，但你可以按照这些思路做一些事情。它不漂亮，所以不要评判我，哈哈。

从本质上讲，您可以将<a>标记放在div中，然后将所述div的text-align属性设置为right。见下文：

body {
display: flex;
background: url("https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/800px-Image_created_with_a_mobile_phone.png")
no-repeat center;
color: #fff;
background-size: cover;
background-attachment: fixed;
}
div.nav{
background: #fff;
width: 100%;
}
div.links{
text-align: right;
}
.a-color {
color: #007bff;
text-decoration: none;
display: inline-block;
font-size: 2vw;
padding: 15px;
overflow: hidden;
word-spacing: -2px;
letter-spacing: 4px;
cursor: pointer;
transition: .2s;
}
.a-color:hover{
color: darkblue;
}

<div class="nav">
<div class="links">
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
<a class="a-color">TEXT</a>
</div>
</div>