Question

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

我在与index.html完全相同的目录中有一个SVG文件，并且正在寻找在后台显示SVG的最佳方法，以便将其包含在设备中（适合显示的屏幕）< / p>

以下内容不起作用-屏幕上显示的唯一内容是实际的代码本身：直接在输入按钮上方的“ 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>

Answer 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以覆盖CSS的背景

1 个答案: