css - 在 css sprite 图像中具有背景位置的背景大小

Question

我在一张图片中有三 (3) 个社交图​​标，在另一张图片中有双倍大小的相同图标用于 Retina 显示。我以为我的 CSS 会是这样的:

.social-media li a {
    width: 44px;
    height: 48px;
    background: url('social-media.png') no-repeat;
} 

@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) { 
    .social-media li a {
        background: url('social-media@2x.png') no-repeat;
        background-size: 44px 48px;  /* same with width & height of normal (non-retina) image for fitting in equal space */
    }
}

但是，background-size 似乎在这里造成了问题。但是，如果没有该属性，我无法将视网膜显示器的图像放入 44 x 48(普通图像 block )维度 block 中。什么是正确的方法？

在我下面的 fiddle 中，你会看到，我放了三个 block 。第一个^st 一个用于正常图像，第二个^nd 一个用于显示视网膜图像演示，其原始尺寸为两倍(主要是检查我的 background-position 的正确性)，最后一个用于在正常图像大小块内显示视网膜图像演示(因为我喜欢首先在普通设备而不是视网膜设备上检查它们，以了解它们在视网膜设备中的表现)。

简而言之，我需要我最后一个区 block 的正确结果。

Fiddle Demo.

#normal .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#normal .social-media li {
  float: left;
  margin-right: 20px;
}
#normal .social-media li:last-child {
  margin-right: 0;
}
#normal .social-media li a {
  width: 44px;
  height: 48px;
  background: url('http://i.imgur.com/xr8VaHh.png') no-repeat;
  display: block;
}
#normal .social-media li a.facebook-icon {
  background-position: 0 -60px;
}
#normal .social-media li a.facebook-icon:hover {
  background-position: 0 0;
}
#normal .social-media li a.twitter-icon {
  background-position: -64px -60px;
}
#normal .social-media li a.twitter-icon:hover {
  background-position: -64px 0;
}
#normal .social-media li a.linked-in-icon {
  background-position: -128px -60px;
}
#normal .social-media li a.linked-in-icon:hover {
  background-position: -128px 0;
}
/***************** For Retina background image with original size **************/

#forRetinaOriginalSize .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#forRetinaOriginalSize .social-media li a {
  width: 88px;
  height: 96px;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  display: block;
}
#forRetinaOriginalSize .social-media li a.facebook-icon {
  background-position: -30px -141px;
}
#forRetinaOriginalSize .social-media li a.twitter-icon {
  background-position: -157px -141px;
}
#forRetinaOriginalSize .social-media li a.linked-in-icon {
  background-position: -285px -141px;
}
#forRetinaOriginalSize .social-media li a.facebook-icon:hover {
  background-position: -30px -21px;
}
#forRetinaOriginalSize .social-media li a.twitter-icon:hover {
  background-position: -157px -21px;
}
#forRetinaOriginalSize .social-media li a.linked-in-icon:hover {
  background-position: -285px -21px;
}
/***************** For Retina background image with normal size **************/

#forRetinaNormalSize .social-media {
  list-style: none;
  display: inline-block;
  padding-top: 25px;
}
#forRetinaNormalSize .social-media li a {
  width: 44px;
  height: 48px;
  display: block;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  -webkit-background-size: 44px 48px;
  background-size: 44px 48px;
}
#forRetinaNormalSize .social-media li a.facebook-icon {
  background-position: -30px -141px;
}
#forRetinaNormalSize .social-media li a.twitter-icon {
  background-position: -157px -141px;
}
#forRetinaNormalSize .social-media li a.linked-in-icon {
  background-position: -285px -141px;
}
#forRetinaNormalSize .social-media li a.facebook-icon:hover {
  background-position: -30px -21px;
}
#forRetinaNormalSize .social-media li a.twitter-icon:hover {
  background-position: -157px -21px;
}
#forRetinaNormalSize .social-media li a.linked-in-icon:hover {
  background-position: -285px -21px;
}
/* HiDPI support for Normal */

@media (-o-min-device-pixel-ratio: 5/4),
(-webkit-min-device-pixel-ratio: 1.25),
(min-resolution: 120dpi),
(min-resolution: 1.25dppx) {
  #normal .social-media li a {
    background: image-url('http://i.imgur.com/Cif180D.png') no-repeat;
    -webkit-background-size: 44px 48px;
    background-size: 44px 48px;
  }
  #normal .social-media li a.facebook-icon {
    background-position: -30px -141px;
  }
  #normal .social-media li a.twitter-icon {
    background-position: -157px -141px;
  }
  #normal .social-media li a.linked-in-icon {
    background-position: -285px -141px;
  }
  #normal .social-media li a.facebook-icon:hover {
    background-position: -30px -21px;
  }
  #normal .social-media li a.twitter-icon:hover {
    background-position: -157px -21px;
  }
  #normal .social-media li a.linked-in-icon:hover {
    background-position: -285px -21px;
  }
}

<div class="container">
  <div class="row">
    <div class="col-xs-12" id="normal">
      <h3>1. Normal Background Image</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>

    <div class="col-xs-12" id="forRetinaOriginalSize">
      <h3>2. For Retina Background Image (with Original size of itself)</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>

    <div class="col-xs-12" id="forRetinaNormalSize">
      <h3>3. For Retina Background Image (with Normal or compressed size)</h3>
      <ul class="social-media clearfix">
        <li>
          <a class="facebook-icon" href="#"></a>
        </li>
        <li>
          <a class="twitter-icon" href="#"></a>
        </li>
        <li>
          <a class="linked-in-icon" href="#"></a>
        </li>
      </ul>
    </div>
  </div>
</div>

Answer 1

您需要使用用于高密度设备 (@2x) 的图像将所有尺寸除以 2，为此您需要尺寸均匀的图像(因为所有尺寸将除以 2)才能看起来不错。

我已经修改了 facebook 图标，例如:https://jsfiddle.net/wqkewd03/3/

#forRetinaNormalSize .social-media li a {
  width: 44px;
  height: 48px;
  display: block;
  background: url('http://i.imgur.com/Cif180D.png') no-repeat;
  -webkit-background-size: 268px 129px;
  background-size: 268px 129px;

#forRetinaNormalSize .social-media li a.facebook-icon {
  background-position: -15px -70px;
}

#forRetinaNormalSize .social-media li a.facebook-icon:hover {
  background-position: -15px -10px;
}

我通常使用“@2x”作为默认值(对于那种图像:图标等)使用这种方法，图像不会太大，缩放对于今天的浏览器来说还不错所以为什么不使用 1 版本和一半的代码你需要专门针对它。当高密度桌面屏幕到来时，它似乎是面向 future 的。