视网膜精灵图标问题答案

【问题标题】：Retina sprite icon issue视网膜精灵图标问题
【发布时间】：2017-12-24 08:30:24
【问题描述】：

我的语言切换器视网膜精灵图标有问题。因为我的语言切换器有一个 :before 语句，并且我在那里应用了精灵图标样式。我需要您的帮助来将其调整为 2 倍设备像素比（视网膜）。这是代码：

.l-header #nav > div.v-menu::before {
content: "";
display: block;
position: absolute;
height: 23px;
width: 23px;
background-position: 0 -1993px;
left: 20px;
top: 16px;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
background-image: url('../img/sprite-icons-sf04c977769.png');
background-repeat: no-repeat;
}





@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
   only screen and (min--moz-device-pixel-ratio: 2.0),
   only screen and (-o-min-device-pixel-ratio: 200/100),
   only screen and (min-device-pixel-ratio: 2.0) {
       .l-header #nav > div.v-menu::before {
          background-image:url('../img/sprite@2x.png');
          -webkit-background-size: 0px -3986px;
          -moz-background-size: 0px -3986px;
          background-position: 0px -3986px;
      }
  }

我实际上也有 2x 精灵图像（'../img/sprite@2x.png'）。

网址：mywebsite

谢谢。

【问题讨论】：

你试过@media (min-resolution: ...)吗？
是的，我已经阅读了这个 article 并尝试使用这些媒体查询样式，但对我没有用。
那你能不能把完整的代码贴出来，包括媒体查询，让别人看看有什么问题。
我刚刚添加了完整的代码。你现在可以检查了。
媒体查询中的意思是background-position，而不是background-size。

标签： retina-display css-sprites

【解决方案1】：

如您的情况，如果两个背景图像相对于彼此具有正确的大小，并且精灵在图像中的正确位置，您不必再次重新计算背景位置，它将是自动完成。

您需要做的就是指定较小图像的背景位置和背景大小。

.l-header #nav > div.v-menu {
  position: relative; 
  margin-left:auto;
  width:30px; height:30px;
}

.l-header #nav>div.v-menu::before {
  content: "";
  display: block;
  position: absolute;
  height: 23px;
  width: 23px;
  background-position: 0 -1993px;
  left: 20px;
  top: 16px;
  top: 50%;
  left: 50%;
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-image: url('http://faradid-honar.com/wp-content/themes/faradid/assets/img/sprite-icons-sf04c977769.png');
  background-repeat: no-repeat;
  background-size: 71px 2157px;  /* this is new */
}

@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
  .l-header #nav>div.v-menu::before {
    background-image: url('http://faradid-honar.com/wp-content/themes/faradid/assets/img/sprite@2x.png');
    /* all other properties can remain as they were */
  }
}

<div class="l-header">
  <div id="nav">
    <div class="v-menu">
    </div>
  </div>
</div>

【讨论】：