css - 带有背景图像的 CSS 菜单。如何使用 % 和 EM 正确地放大和缩小

Question

我有这个菜单；http://fhemmel.host56.com/stack/ 我希望它在我调整窗口大小时放大和缩小，但仍然可以正确显示 % 和 EM。我试图修复 x 和 y 位置以及基本位置以使其出现，但我无法让它出现。

任何人？

Answer 1

我猜你需要它用于手机 :) 最好的方法是使用 % 来完成，然后一切都会自动进行，但是对于这个而不是将图像作为背景，你需要将它们作为 HTML 标记来执行。您无法重新缩放背景元素（好的，您可以使用 transform: scale 来完成，但在这种情况下它对您没有帮助）。

然后你会有这样的东西http://jsfiddle.net/55m8j/1/：

<nav>
   <ul>
    <li><a href="index.html" id="side1"><img src="image1.jpg"></a></li>             
    <li><a href="index.html" id="side2"><img src="image2.jpg"></a></li>
    <li><a href="index.html" id="side3"><img src="image3.jpg"></a></li>
    <li><a href="index.html" id="side4"><img src="image4.jpg"></a></li>
    <li><a href="index.html" id="side5"><img src="image5.jpg"></a></li>
   </ul>
</nav>

在 CSS 中

nav ul {list-style-type: none;}
nav ul li {width: 20%; float: left;}
nav ul li a {display: block;}
nav ul li a img {width: 100%; }

其他方法只是制作菜单而不是图像。您可以使用 squirell 渲染字体、添加文本阴影、一些渐变、边框，结果将是相似的 :)