gpt4 book ai didi

html - 如何删除背景图像周围的填充?

转载 作者:太空宇宙 更新时间:2023-11-04 14:26:38 25 4
gpt4 key购买 nike

如何去除背景图片周围的“填充”?

这是一个演示: https://jsbin.com/dobucizaqi/edit?html,css,output

.foo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23f39c12' d='M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 8em 8em;
height: 8em;
width: 8em;
}
.bar {
background-color: red;
align-items: center;
display: flex;
}
<div class="bar">
<div class="foo"></div>
<p>Lorem ipsum</p>
</div>

我尝试删除边距和填充,但没有成功。

我希望两个左边框都对齐并删除水平和垂直方向的“填充”。

谢谢。

V.

最佳答案

简单调整SVG的viewBox:

.foo {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='3 3 18 18'%3E%3Cpath fill='%23f39c12' d='M3,19V5A2,2 0 0,1 5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19M17,12L12,7V10H8V14H12V17L17,12Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 8em 8em;
height: 8em;
width: 8em;
}
.bar {
background-color: red;
align-items: center;
display: flex;
}
<div class="bar">
<div class="foo"></div>
<p>Lorem ipsum</p>
</div>

关于html - 如何删除背景图像周围的填充?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49360532/

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