CSS：使响应式导航栏中的背景图像链接响应和缩放答案

【问题标题】：CSS: Make background image links in responsive navbar responsive and scaleCSS：使响应式导航栏中的背景图像链接响应和缩放
【发布时间】：2014-10-03 15:04:57
【问题描述】：

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

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

首先是桌面版：

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; }

现在媒体查询fior max-width 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; }

【问题讨论】：

标签： css responsive-design media-queries background-image background-size

【解决方案1】：

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

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

【讨论】：