缩放列表导航菜单中背景图像的大小

我希望使用带有背景图像的无序列表构建一个精灵导航菜单。我希望这个菜单扩展到适合浏览器窗口。在我的代码中，<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>

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

相关内容

最新更新

热门标签：