Question

这是我的问题：

body {
background: url("http://imgs.ir/imgs/201307/1336_menu.png") no-repeat scroll center top transparent;
}

#menu {
display: block;
height: 193px;
margin: auto;
position: relative;
top: 32px;
width: 400px;
}

nav {
left: 0;
min-width: 426px;
position: absolute;
text-align: center;
top: 79px;
}

nav a {
padding: 5px 7px;
color:white;
}

<div id="menu">
    <nav>
        <a href="#">HOME</a>
        <a href="#">SERVICES</a>
        <a href="#">ABOUT</a>
        <a href="#">BLOG</a>
        <a href="#">CONTACT</a>
    </nav>
</div>

首先，菜单适合背景位置，但使结果窗口更小和更小。当菜单离开背景位置时看到的较小。

如何避免这种情况并将菜单修复为背景图像位置？（我希望在我的网站中心有一个菜单背景图片）

Answer 1

理解你在寻找什么真的很麻烦，但是这样吗？基本上它需要我对nav等进行的一系列更改。

http://jsfiddle.net/robsterlini/Vqa7v/2/

Answer 2

我自己解决了这个问题：http://jsfiddle.net/Vqa7v/4/

.menu {
position:absolute;
top: 20px;
left:15px;
}

nav {
text-align: center;
position:absolute;
width:100%;
height:100px;
background:url('http://upload7.ir/images/27569577012963327319.jpg') no-repeat;
min-width:500px;
}

nav a {
padding:0 5px 0 0;
line-height:35px;
color:oldlace;
text-shadow:0 0 2px #000;
text-decoration:none;
letter-spacing:1px;
}

<nav>
       <div class="menu">
        <a href="#">HOME</a>
        <a href="#">SERVICES</a>
        <a href="#">ABOUT</a>
        <a href="#">BLOG</a>
        <a href="#">CONTACT</a>
       </div>
</nav>

缩小RESULT窗口宽度，看菜单固定为背景图像。

修复背景图像位置上的菜单

2 个答案: