GatsbyJS - 在 CSS 中使用 SVG 作为伪背景图像

Question

这是我一段时间以来一直在玩弄的东西，但现在我正在盖茨比工作的项目中，我需要一些建议。

我正在尝试使用 SVG 作为伪背景图像，但到目前为止无济于事。

SCSS代码：

 &:after {
    display: block;
    content: "";
    position: absolute;
    background-image: url(../../static/square-hollow-yellow.svg);
    width: 150px;
    height: 150px;
    bottom: -5%;
    right: 50px;
  }

在检查器中查找背景图像源时返回的内容。

url(data:image/svg+xml;base64,Ym9vawAAAABtYXJrAAAAADgAAAA4AAAAsAMAAAAABBAAAAAAVkcAABAHH+wVMcJBAAAAAP9/AADcAgAABAAAAAMDAAAABAAADAAAAAEBAABBcHBsaWNhdGlvbnMEAAAAAQEAAE1BTVAGAAAAAQEAAGh0ZG9jcwAACAAAAAEBAABhbmdlbC12MgoAAAABAQAAd3AtY29udGVudAAABgAAAAEBAAB0aGVtZXMAABQAAAABAQAAYW5nZWwtc3RhcnRlci1tYXN0ZXIGAAAAAQEAAGFzc2V0cwAABAAAAAEBAABzdmdzGAAAAAEBAABzcXVhcmUtaG9sbG93LXllbGxvdy5zdmcoAAAAAQYAABAAAAAkAAAAMAAAAEAAAABQAAAAZAAAAHQAAACQAAAAoAAAAKwAAAAIAAAABAMAAJ4xhQEDAAAACAAAAAQDAAD6RkABAwAAAAgAAAAEAwAAiEw3AAMAAAAIAAAABAMAACAHJQEDAAAACAAAAAQDAAArByUBAwAAAAgAAAAEAwAALAclAQMAAAAIAAAABAMAAOIZJQEDAAAACAAAAAQDAACO/qEBAwAAAAgAAAAEAwAAUgmiAQMAAAAIAAAABAMAAHAJogEDAAAAKAAAAAEGAAD8AAAADAEAABwBAAAsAQAAPAEAAEwBAABcAQAAbAEAAHwBAACMAQAACAAAAAAEAABBwg04Y7pOQRgAAAABAgAAAQAAAAAAAAAfAgAAAAAAAB8CAAAAAAAAAAAAAAEFAAAIAAAAAQkAAGZpbGU6Ly8vDAAAAAEBAABNYWNpbnRvc2ggSEQIAAAABAMAAACwYG50AAAACAAAAAAEAABBwb7mH7hbnSQAAAABAQAAQkQ3NDhGNkItMkM2NC0zOTZELUJENjMtRTcwNDRCMEM3MTZGGAAAAAECAACBAAAAAQAAAO8TAAABAAAA7xMAAAEAAAABAAAAAQEAAC8AAAAzAAAAAQIAAGRuaWIAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAADAAAAAAAAAHN2Zz8/Pz8AAAAAAAAAAADMAAAA/v///wEAAAAAAAAAEAAAAAQQAADMAAAAAAAAAAUQAACcAQAAAAAAABAQAADcAQAAAAAAAEAQAADMAQAAAAAAAAIgAACUAgAAAAAAAAUgAAAEAgAAAAAAABAgAAAUAgAAAAAAABEgAABIAgAAAAAAABIgAAAoAgAAAAAAABMgAAA4AgAAAAAAACAgAAB0AgAAAAAAADAgAAD8AQAAAAAAAAHQAAD8AQAAAAAAABDQAAAEAAAAAAAAABfwAACsAAAAAAAAACLwAACgAgAAAAAAAA==)

任何指针或建议将不胜感激。

更新

项目文件夹结构

- src
  - components
    - Heros 
      - hero-square.js (file of component)
    - sass
      - main.scss (stylesheet)
  - static
    - sqaure-hollow-yellow.svg (svg file)
  - templates
    - angel-in-action-single.js (where the component is being rendered/called)

Answer 1

可能背景图像不在容器的可见区域中。 仅使用提供的代码段很难分辨。 特别是因为::after是绝对定位的。

 div{ background-color: red; height: 200px; position: relative; width: 200px } div::after{ background-color: lime; display: block; content: ""; position: absolute; background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg"); width: 150px; height: 150px; bottom: -5%; right: 50px; background-position: 50% 50% }

 <div></div>

另请注意，您可以使用background-size和background-position来放置背景。 为此，您不需要::after 。

 div{ height: 200px; position: relative; width: 200px; background-image: url("https://image.flaticon.com/icons/svg/1643/1643587.svg"); background-repeat: no-repeat; background-size: 100% }.div1{ background-color: green; }.div2{ background-color: lime; background-size: 150px; background-position: -50px -5%; background-repeat: no-repeat }

 <div class = "div1"></div> <div class = "div2"></div>

Answer 2

另一种解决方法是使用gatsby-plugin-react-svg 。 使用自定义真的很容易。 您只需要处理一些事情，就可以轻松实现您想要的。 在您的 gatsby-config.js 中：

plugins: [
  {
    resolve: "gatsby-plugin-react-svg",
    options: {
      rule: {
        include: /assets/ 
      }
    }
  }
]

请记住， /assets/只是一个正则表达式，而不是路径本身。 如果要使用另一个文件夹（即： /svg/ ），则需要将其设置为include: /svg/ 。 无论您的文件夹有多深。

要考虑的另一件事是该文件夹中只有 SVG 并且它们必须具有不同的id （通常导出的 SVG 具有标准id ，如果它们重复，您将在导入 SVG 时遇到麻烦）。

准备好设置后，只需将 SVG 作为 React 组件导入：

从“./path/assets/icon.svg”导入图标； // 其他代码

return <div>
    <Icon className="myIcon" />
</div>;

您现在可以定位 SVG 并根据需要设置样式。 如果它在position: relative容器内，您可以轻松地应用您提供的::after伪选择器的 styles。