Wie setze ich 1px Rahmen und 1px Umriss für ein vergrößertes Hintergrund Sprite?

Question

Ich möchte meine CSS vergrößerte Symbol Sprite einen kleinen weißen Raum durch eine 1px dünnen Umriss gefolgt geben, etwa so:

Jetzt habe ich diese Demos versucht, mit dem gleichen eleganten HTML und nur CSS Variation (mit etwas Hilfe auf den Schultern von anderen talentierten Riesen in der Gemeinde hier aus stehen):

JS Fiddle Demo1
JS FIddle Demo2

{ 
border: 1px solid white; 
outline: 1px solid red; 
} 

jedoch In beiden Ansätzen sind sowohl der Rahmen (der hier als Abstandshalter fungiert) als auch der Umriss viel fetter als das 1px, das ich möchte. Die Herausforderung hier ist, dass ich einen riesigen Hintergrund mit Koordinationen als Sprite verwende, so wird es zum Beispiel background-position: 0 -3048; geben.

Wenn ich versuche, den Rahmen/Umriss in einem übergeordneten div des Symbols zu setzen, dann fällt das gesamte Layout auseinander!

Und wenn ich background-size: contain versuche, dann wird der gesamte Sprite Hintergrund in eine kleine Icon-Größe zerquetscht.

Wie erreiche ich den dünnen 1px Umriss wie im Bild oben gezeigt? Vielen Dank!

Answer 1

background-size wäre die beste Option sein, flexwäre auch nützlich, hier sein.

Sie müssen nur aktualisieren die background-position

.line { 
 
    display: flex; 
 
    margin:1.2em; 
 
    align-items:center; 
 
} 
 
span { 
 
    flex: 1; 
 
    border-bottom: solid red 1px; 
 
    margin:0 0 auto; 
 
    height:25px;/* =============== half ico's height */ 
 
} 
 
.line [class] { 
 
    flex: none; 
 
    height: 50px; 
 
    width: 50px; 
 
    border: solid red 1px; 
 
    box-shadow: inset 0 0 0 2px gray; 
 
    background: url(https://s3-us-west-2.amazonaws.com/appdirect-assets/Blog%20Images/Content/2011/SVG-icons.png); 
 
    background-size: 1100% 800%;/* 11x8*/ 
 
    background-position: 0px 1%; 
 
} 
 
span:last-of-type { 
 
    text-align: right; 
 
} 
 
.line .ico2 { 
 
    background-position:9.5% 15%; 
 
} 
 
.line .ico3 { 
 
    background-position:20% 14.85%; 
 
} 
 
.bigger [class]{ 
 
    height:80px; 
 
    width:80px; 
 
    margin-left:1em; 
 
}

<div class="line"> 
 
    <span>text on left</span> 
 
    <span class="ico1"></span> 
 
    <span>text on right</span> 
 
</div> 
 
<div class="line"> 
 
    <span>text on left</span> 
 
    <span class="ico2"></span> 
 
    <span>text on right</span> 
 
</div> 
 
<div class="line"> 
 
    <span>text on left</span> 
 
    <span class="ico3"></span> 
 
    <span>text on right</span></div> 
 
<div class="line bigger"> 
 
background-size rescales automaticly 
 
    <span class="ico1"></span> 
 
    <span class="ico2"></span> 
 
    <span class="ico3"></span> 
 
</div>

Answer 2

Es ist, weil Sie eine transform: scale auf dem gleichen Element haben, an dem Sie Ihre Grenze anwenden.

Die Grenzen werden vor den Transformationen angewendet, also wird auch die Grenze skaliert.

Die Lösung besteht darin, Ihren Rahmen an ein übergeordnetes Element des Symbols zu setzen und Maßstab auf das untergeordnete Element anzuwenden.

Answer 3

Solange Sie Skala Elemente verwenden Sie nie eine 1px Linie erhalten:

-ms-transform: scale(3); 
-o-transform: scale(3); 
-webkit-transform: scale(3); 
transform: scale(3);