CSS背景图片SVG

Question

我正在尝试在CSS中将svg图像用作背景图像。 图像仅在较大的设备中重新缩放，而在宽度和高度小于svg图像大小的设备中保持不变。

这是我的代码：

body {
  background-image: url(svgImg.svg);
  background-repeat: no-repeat;
  background-size: cover;
}

您能帮我在每个屏幕上重新排列图像吗？

Answer 1

这段代码做到了，它可以写在一行中，但是我发布了每个细节，所以这是解释性的。

body{
background-image: url(svgImg.svg) ;
background-position: center center;
background-attachment: fixed;
background-repeat: no-repeat;
background-color:#464646;
background-size: cover; }

Answer 2

使用我的解决方案，您可以获得类似的结果：

这是bulletproff解决方案：

您的html ： <input class='calendarIcon'/>

您的SVG ：我用了fa-calendar-alt

（任何IDE都可以打开svg图像，如下所示）

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M148 288h-40c-6.6 0-12-5.4-12-12v-40c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v40c0 6.6-5.4 12-12 12zm108-12v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 96v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm-96 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm192 0v-40c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v40c0 6.6 5.4 12 12 12h40c6.6 0 12-5.4 12-12zm96-260v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h48V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h128V12c0-6.6 5.4-12 12-12h40c6.6 0 12 5.4 12 12v52h48c26.5 0 48 21.5 48 48zm-48 346V160H48v298c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>

要在CSS背景图片上使用它，您必须对SVG进行编码以解决有效字符串。 我用这个工具

只要您拥有所需的所有东西，就可以使用CSS

.calendarIcon{
      //your url will be something like this:
      background-image: url("data:image/svg+xml,***<here place encoded svg>***");
      background-repeat: no-repeat;
    }

注意 ：这些样式不会对已编码的svg图像产生任何影响

.{
      fill: #f00; //neither this
      background-color: #f00; //nor this
}

因为图像上的所有更改都必须直接应用于其svg代码

<svg xmlns="" path="" fill="#f00"/></svg>

为了获得位于右侧的右侧，我复制了一些Bootstrap间距，最后的CSS得到了下一个外观：

.calendarIcon{
      background-image: url("data:image/svg+xml,%3Csvg...svg%3E");
      background-repeat: no-repeat;
      padding-right: calc(1.5em + 0.75rem);
      background-position: center right calc(0.375em + 0.1875rem);
      background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
    }