如何爲放大後的背景精靈設置1px邊框和1px輪廓？

我想給我的CSS-擴大圖標精靈一個白色的小空格，然後1px的薄的輪廓，就像這樣：

現在，我已經嘗試了這些演示，同優雅的HTML和唯一不同的CSS（帶從這裏社區站在其他有才華的巨人的肩膀上一些幫助）：如何爲放大後的背景精靈設置1px邊框和1px輪廓？

JS Fiddle Demo1
JS FIddle Demo2

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

然而，在兩種方法中，正如你所看到的，兩個邊界（在這裏充當一個間隔符）和輪廓比我想要的1px更加粗壯。這裏面臨的挑戰是我使用了一個具有協調功能的巨大背景作爲精靈，因此例如有background-position: 0 -3048;。

如果我嘗試在圖標的父級div中設置邊框/輪廓，那麼整個佈局會崩潰！

如果我嘗試background-size: contain那麼整個精靈背景被壓成一個小圖標大小。

如何獲得如上圖所示的薄1px輪廓？謝謝！

來源

2017-09-26 Sam

凡投票關閉了這個問題：請註明正是你認爲這個問題的問題式，因此它可以被解決和改善因此。謝謝。 – Sam

background-size將是最好的選擇，flex也將是有用的在這裏。

你只需要更新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>

來源

2017-09-26 14:26:09

非常感謝！這個答案解決了我的佈局難題：真棒新技術，我不知道，現在可以嘗試學習！謝謝 – Sam

這是因爲您有一個transform: scale對應用您的邊框的相同元素。

邊界在變換之前應用，因此邊界也得到縮放。

解決方法是將您的邊框放在圖標的父元素上，並將縮放應用於子元素。

來源

2017-09-26 13:23:11 Scoots

謝謝。請參閱我更新的問題！我已經澄清了這個問題，現在的實際挑戰和真正的問題更加明顯。請檢查這兩個演示與您的建議不工作在圖標精靈：https：//jsfiddle.net/effb5849/和https://jsfiddle.net/q7nqkcu8/我想我通過忽略精靈的東西簡單的問題，但我不能這樣做，它使得工作圖標和破碎圖標之間存在差異，因此我決定通過更準確地接近真實生活拼圖來讓我的演示更加複雜。 – Sam

-1

只要你使用的規模元素，你將永遠不會得到1px的線：

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

來源

2017-09-26 13:33:42 exceso

如何爲放大後的背景精靈設置1px邊框和1px輪廓？

回答

相關問題