问题描述：

我有一个图像中的三（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的正确性），最后一个用于在正常图像大小内显示视网膜图像演示块（因为我喜欢首先在普通设备而不是视网膜设备上查看它们在视网膜设备中的表现）。

总之，我需要我的最后一块的结果正确。

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>

当然它是没有意义的_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请求。 –

答

您需要在2对使用图像进行高气孔密度的设备（@ 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个版本和一半的代码，你需要专门针对它。当高密度桌面屏幕到来时，它似乎是未来的保证。

好的，所以定位也需要除以2！我会记住你关于只使用一个版本图像的建议。谢谢！ – user1896653

答

图像图标的年龄结束。您应该切换到使用字形图标库。它们更干净，而且由于它们是字体/矢量，因此可以扩展到几乎任何尺寸。

通过将CSS Hexagon tutorial与Font Awesome相结合，我创建了一个不依赖精灵或图像别名的替代方案。

如果您使用SASS或SCSS，下面的CSS可以减少更多。

.social-media:before, .social-media:after { 
 
    position: absolute; 
 
    border-left: 52px solid transparent; 
 
    border-right: 52px solid transparent; 
 
    content: " "; 
 
    width: 0; 
 
    height: 0; 
 
} 
 
.social-media:before { 
 
    top: -30px; 
 
    border-bottom: 30px solid #6C6; 
 
} 
 
.social-media { 
 
    display: inline-block; 
 
    margin-top: 30px; 
 
    width: 104px; 
 
    height: 60px; 
 
    background-color: #6C6; 
 
    position: relative; 
 
} 
 
.social-media:after { 
 
    bottom: -30px; 
 
    border-top: 30px solid #6C6; 
 
} 
 

 
.social-media span { 
 
    text-align: center; 
 
    width: 100%; 
 
    font-size: 3em; 
 
    line-height: 1.25em; 
 
} 
 

 
.social-media:before { border-bottom: 30px solid #000000; } 
 
.social-media { background-color: #000000; color: #FFFFFF; } 
 
.social-media:after { border-top: 30px solid #000000; } 
 

 
.social-media.facebook:hover:before { border-bottom: 30px solid #0268A0; } 
 
.social-media.facebook:hover { background-color: #0268A0; color: #FFFFFF; } 
 
.social-media.facebook:hover:after { border-top: 30px solid #0268A0; } 
 

 
.social-media.twitter:hover:before { border-bottom: 30px solid #03BEE4; } 
 
.social-media.twitter:hover { background-color: #03BEE4; color: #FFFFFF; } 
 
.social-media.twitter:hover:after { border-top: 30px solid #03BEE4; } 
 

 
.social-media.linkedin:hover:before { border-bottom: 30px solid #0098DC; } 
 
.social-media.linkedin:hover { background-color: #0098DC; color: #FFFFFF; } 
 
.social-media.linkedin:hover:after { border-top: 30px solid #0098DC; }

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div class="social-media facebook"> 
 
    <span class="fa fa-facebook"></span> 
 
</div> 
 

 
<div class="social-media twitter"> 
 
    <span class="fa fa-twitter"></span> 
 
</div> 
 

 
<div class="social-media linkedin"> 
 
    <span class="fa fa-linkedin"></span> 
 
</div>

SCSS规则

@mixin hex($bgcolor:#000000, $fgcolor:#FFFFFF) { 
    &:before { border-bottom: 30px solid $bgcolor; }; 
    background-color: $bgcolor; color: $fgcolor; 
    &:after { border-top: 30px solid $bgcolor; }; 
} 

.social-media { @include hex(); } 
.social-media.facebook:hover { @include hex(#0268A0); } 
.social-media.twitter:hover { @include hex(#03BEE4); } 
.social-media.linkedin:hover { @include hex(#0098DC); }

这很好！谢谢。 – user1896653

背景大小与css sprite图像中的背景位置

SCSS规则

相关推荐