发送 SVG 以覆盖 CSS 中的背景答案

【问题标题】：Sending SVG to cover background in CSS发送 SVG 以覆盖 CSS 中的背景
【发布时间】：2019-06-25 17:20:02
【问题描述】：

Stack Overflow 上有多篇关于使用 SVG 覆盖 html 文件中的背景的帖子，但对于如何处理这个问题似乎没有达成共识，而且没有一个解决方案对我有用。

我在与index.html 完全相同的目录中有一个 SVG 文件，我正在寻找在背景中显示 SVG 的最佳方式，以便它包含在设备中（适合显示的屏幕）

以下内容不起作用 - 屏幕上显示的唯一内容是实际代码本身：“body { background: url('my_image.svg')}”直接在输入按钮上方。

我也试过

  body { 

background-image: url('my_image.svg');
background-size: 100% auto;

}

但这也行不通。删除引号也无济于事。

这是完整的 HTML 文件 - 在与 index.html 位于同一目录中的背景中显示 SVG 的解决方法是什么？

我应该在 html 文件中使用实际的 SVG 参数吗？

                                                                                                                                                                                <!DOCTYPE html>
<html lang='en'>
<head>
  <title><Test page</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <sytle>
  body { background: url('my_image.svg')}
  </style>
</head>
<body>
<div class="prose">
<h1>Take a photo! </h1>
  <label for="files" class="btn">Select Image</label>
  <input id="files" style="visibility:hidden;" type="file" accept="image/*" capture>
</div>
</body>
</html>

【问题讨论】：

标签： html css svg

【解决方案1】：

<html lang='en'>

<head>
  <title>Test page</title>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <style>
    body {
      background-image: url(visit-us.svg);
      background-size: 100% auto;
    }
  </style>
</head>

<body>
  <div class="prose">
    <h1>Take a photo! </h1>
    <label for="files" class="btn">Select Image</label>
    <input id="files" style="visibility:hidden;" type="file" accept="image/*" capture>
  </div>
</body>

</html>

【讨论】：

也试过了，但同样的事情发生了。屏幕上只显示实际代码，而不是 SVG
现在就试试吧。你拼错了样式