-1

それは私の問題です：

http://jsfiddle.net/Vqa7v/

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>

最初、メニューは背景位置に合わせられますが、メニューが背景位置から外れるときを確認するために結果ウィンドウを小さくします。

それを回避し、メニューを背景画像の位置に固定するにはどうすればよいですか? （背景画像のウェブサイトの中央にメニューを配置したい）

4

2 に答える 2

0

私は自分で解決しました：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 ウィンドウの幅を小さくすると、メニューが背景画像に固定されていることがわかります。

于 2013-08-01T09:43:47.907 に答える