CSS中，我們可以使用position屬性將導航欄放置在圖片上，我們需要創(chuàng)建一個包含導航欄的HTML結構，然后為導航欄和圖片分別設置CSS樣式。

以下是一個簡單的示例：

HTML結構：

<div class="image-container">
    <img src="image.jpg" alt="背景圖片">
    <div class="nav-bar">
        <ul>
            <li><a href="#">首頁</a></li>
            <li><a href="#">產品</a></li>
            <li><a href="#">服務</a></li>
            <li><a href="#">聯(lián)系我們</a></li>
        </ul>
    </div>
</div>

CSS樣式：

.image-container {
    position: relative;
    width: 100%;
    height: 500px;
}
.image-container img {
    width: 100%;
    height: 100%;
}
.nav-bar {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: #333;
}
.nav-bar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nav-bar ul li {
    margin: 0 10px;
}
.nav-bar ul li a {
    color: #fff;
    text-decoration: none;
}

在這個示例中，我們首先將圖片和導航欄放置在一個相對定位的容器中，我們?yōu)閳D片設置寬度和高度，使其充滿容器，我們?yōu)閷Ш綑谠O置***定位，使其位于容器的頂部，我們?yōu)閷Ш綑谠O置寬度和高度，并添加背景顏色，我們?yōu)閷Ш綑谥械牧斜眄椩O置樣式，使其居中顯示，并且每個列表項之間有一定的間隔，這樣，我們就可以將導航欄放置在圖片上了。