我希望使用带有背景图像的无序列表构建一个 sprite 导航菜单。我希望此菜单展开以适合浏览器窗口。在我的代码中 <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
关于html - 在列表导航菜单中缩放背景图像的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15971317/