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

l3zydbqr 于 5个月前发布在其他

关注(0)|答案(3)|浏览(74)

我想给给予我的css放大的图标sprite一个小的白色空间，然后是一个1 px的细轮廓，像这样：
x1c 0d1x的数据
现在我已经尝试了这些演示，使用同样优雅的html和不同的CSS（在社区中其他有才华的巨人的帮助下）：
JS Fiddle Demo1
JS Fiddle Demo2的

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

字符串
然而，在这两种方法中，正如你所看到的，边框（在这里充当间隔符）和轮廓都比我想要的1 px大得多。这里的挑战是，我使用了一个巨大的背景和坐标作为精灵，所以会有background-position: 0 -3048;。
如果我试图在图标的父div中设置边框/轮廓，那么整个布局福尔斯就会分崩离析！
如果我尝试background-size: contain，那么整个精灵背景就会被压缩成一个很小的图标大小。
我如何才能实现如上图所示的1 px薄轮廓？

css

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

3条答案

按热度按时间

z0qdvdin1#

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

个字符

赞(0）回复(0）举报 5个月前

y53ybaqx2#

这是因为你有一个transform: scale在同一个元素上，你正在应用你的边框。
边框在变换之前应用，因此边框也会缩放。
解决方案是将边框放在图标的父元素上，并对子元素应用缩放。

赞(0）回复(0）举报 5个月前

niwlg2el3#

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

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

字符串

赞(0）回复(0）举报 5个月前

我来回答

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

3条答案

相关问题

热门标签

最新问答