0
我有一个图像中的三（3）个社交图标和另一个图像中视网膜显示的双倍大小的相同图标。我以为我的CSS会是这样的：背景大小与css sprite图像中的背景位置
.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('[email protected]') 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（正常图像的块）尺寸块的图像。什么是正确的方法？
在我的小提琴下面，你会看到，我已经把三块。 1 st其中一个用于正常图像，2 nd一个用于显示其原始双倍大小的视网膜图像演示（基本上用于检查我的background-position的正确性），最后一个用于在正常图像大小内显示视网膜图像演示块（因为我喜欢首先在普通设备而不是视网膜设备上查看它们在视网膜设备中的表现）。
总之，我需要我的最后一块的结果正确。
#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>
当然它是没有意义的_whole_ 536 * 258像素尺寸的图像尺寸调整到44×48像素的图标尺寸...您只需要修改_one_维度，并让其他维度自动适应。 – CBroe
明白了。但是，我也尝试过这样：#normal .social-media li a.facebook-icon {background-size：44px 48px;}这不起作用。 – user1896653
@CBroe - 您不会将其大小调整为44x48，只是其中一部分需要具有该维度。这是精灵的本质 - 使用一个大图像并在需要的地方显示所需的部分。因此，对于40个图像，您可以有1个文件，39个较少的http请求。 –