[分享]css中导航栏放在背景图上

CSS中导航栏放在背景图上是一种常见的设计模式，它可以让网页显得更加美观和统一。在实现这个效果时，需要运用到CSS语言中的一些技巧和属性。/ 设置背景图 / body{ backgroundimage...

CSS中导航栏放在背景图上是一种常见的设计模式，它可以让网页显得更加美观和统一。在实现这个效果时，需要运用到CSS语言中的一些技巧和属性。

/* 设置背景图 */
body{
  background-image: url('bg.jpg');
  background-size: cover;
}

/* 设置导航栏 */
nav{
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 1; /* 层级设置，保证导航栏在背景图上方 */
}

/* 导航栏样式 */
nav ul{
  list-style: none;
  display: flex;
}

nav li{
  margin-right: 20px;
}

nav a{
  color: white;
  text-decoration: none;
  font-weight: bold;
}

/* 响应式样式 */
@media (max-width: 768px){
  nav{
    top: 20px;
    left: 20px;
  }
} 

在上述代码中，首先设置了背景图的属性，接着用绝对定位将导航栏放在了指定的位置。使用了flex布局让导航栏中的内容横向排列，同时设置了响应式样式，让页面在不同的设备上也能正常显示。

通过这种简单的方式，就能轻松地在CSS中实现导航栏放在背景图上的效果，让网页更加美观和富有个性。