如何为放大的放大背景精灵设置 1px 边框和 1px 轮廓？

Question

我想给我的 css 放大的图标 sprite 一点白色 space 然后是 1px 细轮廓，像这样:

现在我已经尝试了这些演示，具有相同的优雅 html 并且只有 CSS 不同（在此处站在社区中其他才华横溢的巨人的肩膀上的一些帮助）：

JS Fiddle Demo1
JS FIddle Demo2

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

然而，正如您所见，在这两种方法中，边框（此处充当 spacer）和轮廓都比我想要的 1px 宽得多。这里的挑战是我使用一个巨大的背景作为精灵，所以会有 background-position: 0 -3048; 例如。

如果我尝试在图标的父 div 中设置 border/outline，那么整个布局就会崩溃！

如果我尝试 background-size: contain 那么整个 sprite 背景就会被压缩成一个很小的图标大小。

如何实现如上图所示的细1px轮廓？谢谢！

Answer 1

这是因为您在要应用边框的同一元素上有一个 transform: scale。

边框在变换之前应用，因此边框也会缩放。

解决方案是将边框放在图标的父元素上，然后对子元素应用缩放。

Answer 2

只要你使用缩放元素，你就永远不会得到 1px 的线：

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

Answer 3

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>

如何为放大的放大背景精灵设置 1px 边框和 1px 轮廓？

How to set 1px border and 1px outline for ENLARGED blown-up background sprite?

css

layout

sprite

background-image