2016-04-27 169 views
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的正確性),最後一個用於在正常圖像大小內顯示視網膜圖像演示塊(因爲我喜歡首先在普通設備而不是視網膜設備上查看它們在視網膜設備中的表現)。

總之,我需要我的最後一塊的結果正確。

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>

+0

當然它是沒有意義的_whole_ 536 * 258像素尺寸的圖像尺寸調整到44×48像素的圖標尺寸...您只需要修改_one_維度,並讓其他維度自動適應。 – CBroe

+0

明白了。但是,我也嘗試過這樣:#normal .social-media li a.facebook-icon {background-size:44px 48px;}這不起作用。 – user1896653

+0

@CBroe - 您不會將其大小調整爲44x48,只是其中一部分需要具有該維度。這是精靈的本質 - 使用一個大圖像並在需要的地方顯示所需的部分。因此,對於40個圖像,您可以有1個文件,39個較少的http請求。 –

回答

1

您需要在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個版本和一半的代碼,你需要專門針對它。當高密度桌面屏幕到來時,它似乎是未來的保證。

+0

好的,所以定位也需要除以2! 我會記住你關於只使用一個版本圖像的建議。 謝謝! – user1896653

0

圖像圖標的年齡結束。您應該切換到使用字形圖標庫。它們更乾淨,而且由於它們是字體/矢量,因此可以擴展到幾乎任何尺寸。

通過將CSS Hexagon tutorialFont 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); } 
+0

這很好!謝謝。 – user1896653