Ich habe drei (3) soziale Symbole in einem Bild und gleiche Symbole mit doppelter Größe für Retina-Display in einem anderen Bild. Ich dachte, meine CSS so sein würde:Hintergrund Größe mit Hintergrund-Position in CSS Sprite Bild

.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 */ 
    } 
}

Aber es scheint, dass background-size Problem schafft hier. Aber ohne diese Eigenschaft kann ich das Bild der Retina-Anzeige nicht in den dimensionalen Block 44 x 48 (normaler Bildblock) einbauen. Was ist der richtige Weg?

In meiner Geige unten, werden Sie sehen, ich habe drei Block gesetzt. 1 ^st Eins ist für normales Bild, 2 ^nd Eins ist für die Anzeige der Retina-Bild-Demo mit ihrer ursprünglichen doppelten Größe (es ist im Grunde um die Korrektheit meiner background-position zu überprüfen), und die letzte ist für die Anzeige der Retina-Bild-Demo innerhalb der normalen Bildgröße Blockieren (wie ich das zunächst bei normalem Gerät anstelle von Retina-Gerät überprüfen möchte, um zu sehen, wie sie sich im Retina-Gerät verhalten werden).

Kurz gesagt, ich brauche das Ergebnis meines letzten Blocks korrekt.

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>

Quelle

2016-04-27 user1896653

Natürlich macht es keinen Sinn, die _whole_ 536 * 258 Pixel großes Bild, um das Symbol Abmessungen von 44 * 48 Pixel, um die Größe ... Sie möchten nur die Dimension _one_ ändern und die andere automatisch anpassen lassen. – CBroe

Verstanden. Aber ich habe auch so versucht: #normal .social-media li a.facebook-icon {Hintergrundgröße: 44px 48px;} was auch nicht funktionierte. – user1896653

@CBroe - Sie werden es nicht auf 44x48 ändern, nur ein Teil davon muss diese Dimension haben.Dies ist die Essenz der Sprites - verwenden Sie ein großes Bild und zeigen Sie die benötigten Teile an, wo Sie es haben möchten. So können Sie für 40 Bilder 1 Datei und 39 weniger HTTP-Anfragen haben. –

Sie werden alle Größen von 2 unter Verwendung von Bildern für Hoch denisity Gerät teilen müssen (@ 2x), dafür brauchen Sie auch großes Bild (wie alle Größen werden durch 2) geteilt, um gut auszusehen.

Ich habe geändert Facebook Link zum Beispiel: 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; 
}

ich in der Regel „@ 2x“ als Standard zu verwenden (für diese Art von Bildern: Symbole, etc.) mit diesem Verfahren, werden die Bilder nicht zu viel größer, Skalierung ist nicht schlecht mit heutigen Browsern, also warum nicht 1 Version und die Hälfte des Codes verwenden müssen Sie gezielt gezielt. Und es scheint zukunftssicher zu sein, wenn Desktop-Bildschirme mit hoher Dichte ankommen.

Quelle

2016-04-27 18:37:36

ok, also Positionierung muss auch durch 2 geteilt werden! Ich werde mich an Ihren Rat zur Verwendung von nur einem Versionsabbild erinnern. Danke! – user1896653

Das Alter der Bildsymbole ist vorbei. Sie sollten zur Verwendung einer Symbolbibliothek für Symbole wechseln. Sie sind sauberer und, da sie eine Schriftart/Vektor sind, skalieren zu fast jeder Größe.

Durch die Kombination dieser CSS Hexagon tutorial mit Font Awesome habe ich eine Alternative erstellt, die nicht auf Sprites oder Aliasing von Bildern beruht.

Wenn Sie SASS oder SCSS verwenden, kann dieses CSS weiter reduziert werden.

.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 Regel

@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); }

Quelle

2016-04-28 11:22:54

Das ist gut! Vielen Dank. – user1896653

Hintergrund Größe mit Hintergrund-Position in CSS Sprite Bild

Antwort

SCSS Regel

Verwandte Themen