gpt4 book ai didi

css - 如何为放大的放大背景 Sprite 设置 1px 边框和 1px 轮廓?

转载 作者:太空宇宙 更新时间:2023-11-03 22:36:06 24 4
gpt4 key购买 nike

我想给我的 css 放大图标 sprite 一个小的空白,然后是一个 1px 的细轮廓,如下所示:
enter image description here
现在我已经尝试了这些演示,使用相同优雅的 html 和不同的 CSS(在这里站在社区中其他有才华的巨人的肩膀上提供了一些帮助):

JS Fiddle Demo1
JS FIddle Demo2

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

但是,如您所见,在这两种方法中,边框(此处用作分隔符)和轮廓都比我想要的 1px 宽得多。这里的挑战是我使用一个巨大的背景作为 Sprite ,所以会有 background-position: 0 -3048; 例如。

如果我尝试在图标的父 div 中设置边框/轮廓,那么整个布局就会分崩离析!

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

如何实现如上图所示的细 1px 轮廓?谢谢!

最佳答案

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>

关于css - 如何为放大的放大背景 Sprite 设置 1px 边框和 1px 轮廓?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46427680/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com