网页制作，头导航添加背景，文字在背景上面的代码

您可以使用CSS的background属性来为头部导航添加背景，然后使用z-index属性来将文字置于背景之上。以下是代码示例：

HTML:

<nav class="header-nav">
  <ul>
    <li><a href="#">链接1</a></li>
    <li><a href="#">链接2</a></li>
    <li><a href="#">链接3</a></li>
  </ul>
</nav>

CSS:

.header-nav {
  background: url('背景图片地址') no-repeat center center;
  background-size: cover;
  position: relative;
  height: 80px; /*根据实际情况设置高度*/
}

.header-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.header-nav li {
  display: inline-block;
  margin-right: 20px;
}

.header-nav a {
  display: block;
  padding: 10px;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.header-nav a:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.5;
  background-color: #000;
}

在上面的代码中，通过为导航条添加一个背景图片来实现背景效果;然后使用z-index属性将链接文字置于背景之上。同时也可以在链接文字的:before伪元素中添加一个半透明的背景色来实现更好的效果。