如何删除背景图像周围的填充？

Question

如何删除＆＃34;填充＆＃34;在背景图片周围？

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

＆＃13;

＆＃13;

$gte

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

我希望两个左边框都对齐并删除＆＃34; padding＆＃34;水平和垂直。

感谢。

诉

Answer 1

只需调整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>

Answer 2

您可以调整SVG的视图，也可以使用CSS：

.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: 130%;
  background-color: rgba(0,0,0,0.25);
  background-position: -10px -10px;
  height: 4em;
  width: 4em;
}

<强>段

.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: 130%;
  background-position: -10px -10px;
  height: 4em;
  width: 4em;
}
.bar {
  background-color: red;
  align-items: center;
  display: flex;
}

<div class="bar">
  <div class="foo"></div>
  <p>Lorem ipsum</p>
</div>

预览