css导航栏怎么放到图片上

想要在网页上制作出美观实用的导航栏，是许多网站设计者不可或缺的一部分。而将导航栏放到图片上则是一个比较新颖的设计。下面就来介绍一下如何将css导航栏放到图片上。

html {
    background-image: url(bg.jpg);  /* 设置网页背景为图片 */
}

首先，将网页背景设置为图片。使用CSS代码“background-image:url()”即可将图片设置为网页背景。这个图片可以是任何你喜欢的图片。

接下来，我们要将导航栏放到图片上。在HTML代码中插入导航栏代码：

<div class="nav">
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div>

在CSS代码中，要设置导航栏的样式：

.nav {
    position: absolute;  /* 为导航栏设置绝对位置 */
    top: 100px;  /* 导航栏距离页面顶部的位置 */
    left: 0;  /* 导航栏距离页面左侧的位置 */
    width: 100%;  /* 导航栏宽度为100% */
}

.nav ul {
    list-style-type: none;  /* 去掉无序列表的默认样式 */
    margin: 0;
    padding: 0;
    text-align: center;  /* 让导航栏居中 */
}

.nav li {
    display: inline-block;  /* 设置li横向排列 */
}

.nav a {
    display: block;  /* 将a标签设置为块级元素，便于设置样式 */
    padding: 10px;  /* 设置a标签的内边距 */
    text-decoration: none;  /* 去掉下划线 */
    color: #FFF;  /* 设置文字颜色为白色 */
    background-color: rgba(0,0.5);  /* 设置背景颜色为半透明黑色 */
}

.nav a:hover {
    background-color: rgba(0,0.8);  /* 鼠标经过时的背景颜色 */
}

最后，在HTML代码中插入导航栏所需要的图片，代码如下：

<img src="header.jpg" alt="Header" width="100%">

这样，就能将导航栏放到图片上了。