为客户在视差 WordPress 网站上工作，我有一个导航栏，其中有一个精灵用于每个链接的背景图像。您可以在此处查看七个链接导航栏 ( http://www.aishla.com/blog/2014/my-aish-test/ )。现在它在桌面上看起来很棒，但我想让这些图像响应。换句话说，随着设计变小而变小。
所以我想我可以在 CSS 中使用 background-size 设置，但是当我尝试在我的媒体查询中时，我得到了 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; }