CSS:使响应式导航栏中的背景图像链接具有响应性和缩放性

Question

在为客户开发视差 WordPress 网站时，我有一个带有 Sprite 的导航栏，用于每个链接的背景图像。您可以在此处看到七链接导航栏 ( http://www.aishla.com/blog/2014/my-aish-test/ )。现在它在桌面上看起来很棒，但我想让这些图像响应。换句话说，随着设计变小而变小。

所以我想我可以在 CSS 中使用背景大小设置，但是当我在我的媒体查询中尝试时，我得到了 a href 内的整个 Sprite ，而不仅仅是我想要的图像部分。所以我想知道这是否有可能以这种方式完成，或者我是否坚持为不同的屏幕分辨率创建一系列 Sprite 。这是我用来尝试完成这项工作的示例:

首先关闭桌面版本:

nav ul.sub-nav li a { background-image: url("../aish/images/subnav.gif"); background-repeat: no-repeat; color: #000; float: left; height: auto; margin: 0; padding: 80px 0 0 0 ! important; font-size: 16px;font-weight: 700; text-transform: uppercase; text-align: center;  width: 137px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }
nav ul.sub-nav li:first-child a:hover { background-position: 0px -140px; }

现在媒体查询最大宽度为 768px:

nav ul.sub-nav { float: none; width: 763px; margin: 0 auto; padding: 0; height: auto; list-style-type: none; }
nav ul.sub-nav li a { background-size: 79.562% 79.562%; padding: 80px 0 0 0 ! important; font-size: 14px; width: 109px; }
nav ul.sub-nav li:first-child a { background-position: 0px 0px; display: inline; }

Answer 1

抱歉不能发表评论 -> 你不能使用 background-size: 以这种方式，因为你说你希望你的背景是 nav ul.sub-nav li a 宽度的 79.562%，它被设置为 137px 这样会让你的整个 sprite 变宽 108px，因此它看起来这么小。如果你想要漂亮清晰的导航图标，我会使用 .svg 图像，无论如何它们在高 DPI 屏幕上看起来会更好。

如果你想使用背景大小，你必须计算你的 sprite 适合 137px 的次数，你最终会得到 >600%，但你的 sprite 需要与你的 div 的比例相同，以及我不推荐的非 hdpi 图像的所有工作。