如何移除背景图片周围的填充？

Question

如何去除背景图像周围的“填充”？

这里是一个演示： 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>

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

我希望两个左边框对齐并且水平和垂直方向上去掉"padding"。

谢谢。

V.

- Vincent

---

不知道你有没有试过padding: 0px呢？ - Steven

@Steven Nopes，那不会起作用，这是因为SVG图像文件的原因。 - Praveen Kumar Purushothaman

你的图片本身是否可能有填充？ - obey

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>

- Temani Afif

---

谢谢。两种解决方案都可以。我更喜欢第二个，因为它似乎更容易使用。 - Vincent

@PraveenKumar 不是的;)我在添加第一个解决方案后不到1分钟就添加了第二个解决方案，甚至没有注意到你的答案[如果是这种情况，我不会添加它]...你可以检查我的编辑 https://stackoverflow.com/posts/49360591/revisions - Temani Afif

@TemaniAfif 我并不责怪你抄袭了我的答案。别担心，历史记录也不会反映出你的编辑，因为它是在不到5分钟内完成的。 - Praveen Kumar Purushothaman

@TemaniAfif 再次声明，我并不生气或者有什么不满的啊兄弟。别担心！没事的，我很高兴！ :) :) :) 我已经给你点了个赞，因为我很喜欢你的正确处理方式。 - Praveen Kumar Purushothaman

@Vincent 因为不是所有的SVG都是相同的 :) 你需要重新调整新SVG的viewBox，当然不能使用相同的值。我会说每个SVG都是独一无二的。 - Temani Afif

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>

预览

- Praveen Kumar Purushothaman