我有一個圖像中的三(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請求。 –