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

问题

I want to give my css-enlarged icon sprite a little white space followed by a 1px thin outline, like so:

Now I have tried these demos, with same elegant html and only varying CSS (with some help from standing on the shoulders of other talented giants in the community here):

JS Fiddle Demo1
JS FIddle Demo2

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

However, in both approaches, as you can see, both border (which acts as a spacer here) and outline are much fatter than the 1px that I want. The challenge here is that I am using a huge background with coordinations as a sprite so there will be background-position: 0 -3048; for example.

If I try to set the border/outline in a parent div of the icon, then the entire layout falls apart!

And if I try background-size: contain then the entire sprite background gets crushed into a tiny icon size.

How can I achieve the thin 1px outline as shown in the image above? Thanks!

回答1:

background-size would be the best option, flex would also be usefull here.

You only have to update the 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>

回答2:

It's because you have a transform: scale on the same element you are applying your border to.

Borders are applied before transforms, so the border gets scaled too.

The solution is to put your border on a parent element of the icon, and apply scale to the child element.

回答3:

As long as you use scale elements you'll never get a 1px line:

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

来源：https://stackoverflow.com/questions/46427680/how-to-set-1px-border-and-1px-outline-for-enlarged-blown-up-background-sprite

标签

css

css3

layout

background-image

sprite