html - 如何设置由 gulp-svg-sprite npm 包导入的元素 svg 背景的宽度和高度？

Question

对于我的元素(网站)，我使用了一个名为 gulp-svg-sprite 的 NPM 包，它将我所有的 SVG 图像放入一个文件 sprites.svg 中并生成 sprites.css。

在 sprites.css 中，有一些 CSS 类将它们的 background-image 属性设置为 sprite.svg 中的 svg 图像。

sprites.css:

.icon:before {
    content: ' ';
    vertical-align: middle;
    display: inline-block;
    background-image: url(/img/sprite.svg);
    background-repeat: no-repeat;
    background-size: 71.7em 114.4em;
}
.icon.icon-logo:before {
    background-position: 0em -98.5em;
    width: 42.4em;
    height: 8.6em;
}

在 index.html 中显示所需的 SVG 图像:

<span class="icon icon-logo"></span>

问题:SVG背景图片太大

尝试解决问题 - 尝试调整它的大小，但它不起作用:

index.html:

<style>
  .icon-logo:before {
     width: 130px;
     height: auto;
  }
</style>

Answer 1

由于您的 Sprite 使用 em 单位来调整大小和定位，因此您需要更改 font-size 而不是 width 和 height ，例如:

.icon-logo:before {
     font-size:.8em;
  }