0

我希望使用带有背景图像的无序列表构建一个精灵导航菜单。我希望这个菜单展开以适应浏览器窗口。在我的代码 <img src="images/css-sprite-example.png" alt="header" />中，缩放图像以适应屏幕的整个宽度。

我将如何在菜单中使用相同的图像并且菜单扩展以填充屏幕的宽度。

我正在使用 CSS #menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;}，但 100% 仅将图像缩放到图像的实际大小。

显然，我将不得不更改我的 CSS 选择器必须以百分比而不是像素为单位的方式。

非常感谢

<head>
<style type="text/css">
#menucontainer {
    background: blue;
    text-align: center;
    height:auto;
    width:auto;
}
#menucontainer img {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid red;
    display: block;
    width: 100%;
}
#menucontainer ul {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid pink;
    display: block;
    width: 100%;
    list-style:none;
}
#menucontainerr li {
    margin-left: auto;
    margin-right: auto;
    border: 1px solid black;
    display: block;
    width: 100%;
}
ul#menu{margin:0; padding:0; list-style:none;}
#menu li{overflow:hidden; text-indent:-9999px; display:inline; float:left; margin-right:1px;}
#menu li a{background:url('images/css-sprite-example.png') no-repeat; width:100%; height 100%; display:block;}
    /* Home Button */
    #menu li.home{width:215px; height:52px;}
    #menu li.home a{background-position:-5px -5px;}
    #menu li.home a:hover{background-position:-5px -15px;}
    #menu li.home a.selected{background-position:-5px -25px;}
    /* About Button */
    #menu li.about{width:120px; height:52px;}
    #menu li.about a{background-position:-125px -5px;}
    #menu li.about a:hover{background-position:-125px -15px;}
    #menu li.about a.selected{background-position:-125px -25px;}
    #menu li.about a.selected:hover{background-position:-125px -35px;}
    /* Contact Button */
    #menu li.contact{width:80px; height:52px;}
    #menu li.contact a{background-position:-250px -5px;}
    #menu li.contact a:hover{background-position:-10% -15px;}
    #menu li.contact a.selected{background-position:-250px -25px;}
</style>
</head>
<body>
    <div id="menucontainer">
        <img src="images/css-sprite-example.png" alt="header" />
        <ul id="menu">  
            <li class="home"><a href="#">Home</a></li>  
            <li class="about"><a class="selected" href="#">About</a></li>  
            <li class="contact"><a href="#">Contact</a></li>  
        </ul>  
    </div>
</body>
</html>
4

1 回答 1

0

如果要缩放需要使用的背景图像background-size，请参阅http://docs.webplatform.org/wiki/css/properties/background-size和https://developer.mozilla.org/en-US/docs/ CSS/背景尺寸

于 2013-04-12T12:29:13.117 回答