Question

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

所以我认为我可以在CSS中使用背景大小设置，但是当我尝试使用我的媒体查询时，我会在一个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; }

Answer 1

抱歉无法评论 - ＆gt;你不能使用background-size：就像你说你想要你的背景是导航ul.sub-nav li的宽度的79.562％设置为137px所以这会使你的整个精灵宽108px，因此它看起来如此之小。如果你想要导航的清晰图标，我会使用.svg图像，无论如何它们在高DPI屏幕上看起来会更好。

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

CSS：在响应式导航栏响应和缩放中创建背景图像链接

1 个答案: