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

【问题标题】：scaling the size of background image in list navigation menu在列表导航菜单中缩放背景图像的大小
【发布时间】：2013-04-12 20:29:13
【问题描述】：

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

【问题讨论】：

标签： html css background-image fluid-layout

【解决方案1】：

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

【讨论】：

感谢您提供的详细信息和及时的回复。我刚刚尝试了几种设置，但均无济于事。事实上，我尝试过：#menu li a{background:url('images/css-sprite-example.png') no-repeat; background-size:8px 6px; display:block;} 我希望这会将图像缩小到很小的尺寸以证明它有效。但是大小没有变化。显然，我的代码并不好。你还有其他建议吗？非常感谢
我真的不能说没有看到页面。锚内还有图像元素吗？这会掩盖背景，这可以解释为什么尺寸没有改变。另外，请尝试查看浏览器文档检查器中的锚点以检查其大小并查看其是否应用了正确的 css 属性。
谢谢丹尼尔。我会尝试一些实验，不幸的是我不知道你在上一条评论中的意思（你在锚和文档检查器中是否还有一个图像元素来检查它的大小并查看它是否具有正确的 css 属性）。再次感谢