Question

我的语言切换器视网膜精灵图标出现问题。因为我在我的语言切换器的语句之前，我在那里应用了精灵图标样式。我需要你的帮助来调整2x设备像素比（视网膜）。这是代码：

.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精灵图像（＆＃39; ../ img/sprite@2x.png'）。

网址网址：mywebsite

谢谢。

Answer 1

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

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

＆＃13;

.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 */
  }
}

＆＃13;

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

＆＃13;

Retina精灵图标问题

1 个答案: