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

这是我的代码:

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

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

#1楼 票数:0

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

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

#2楼 票数:0

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

svg背景图片CSS

这是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);
    }

  ask by alexsc translate from so

未解决问题?本站智能推荐:

3回复

SVG用作背景图像丢失嵌入图像?

我使用svg作为背景图像,用于响应式布局,以在线格式重新创建复杂的小册子。 一切都适用于矢量对象,但如果我在svg上嵌入图像,它们就不会出现在背景上。 最奇怪的是如果我自己检查svg,图像就在那里,所以这有点烦人! 有谁知道它是否与svg配置或类似的东西有关? 我怎样才能解决这个
2回复

CSS:仅在一个方向上缩放背景SVG

我有一个很好的背景SVG图像来自inkscape,标志着从一个文本部分到下一个文本部分的过渡。 我希望该背景图像向上或向下缩放到文本部分的整个宽度。 出于响应性的原因,该大小取决于浏览器宽度。 但是,我希望背景图像的固定高度为20px。 什么行不通: background-size
2回复

将背景图片添加到SVG

我有从photoshop图层获得的SVG代码。 我想在该svg曲线中添加背景图像。 请帮助我如何添加图像或背景。 .Shape_1 { background-color: rgb(0, 0, 0); box-shadow: -7.314px -6.82px 30px 0px rg
1回复

CSS-如何使SVG响应?

我通过api调用获取svg数据,并将其附加到DOM中的div中。 我要获取13-14个svg元素,并将其附加到单个div 。 我想连续显示所有这些svg。 如果我给出width: 5.5%; 对于svg元素,所有svg都显示在一行中。 但是,当我调整窗口大小或监视器大小很小时,所有sv
1回复

SVG背景图片

我正在使用此SASS: 但它不起作用,我不断出错。 expected a variable name (eg $x) or ')' for the parameter list for url 我想念什么?
4回复

使用CSS和SVG的钻石菜单项

我想在HTML和CSS中编写以下设计 到目前为止我所做的是: 我用它做了: 一个链接 SVG作为背景 CSS中的绝对位置和translate(x,y)属性。 请检查这个小提琴的实时链接 我的设计中的问题是: 每个项目实际上都是一个矩形,如果你注意到突出显示
2回复

背景SVG不会在Bootstrapdiv列中缩放

我希望能够在嵌入Bootstrap的<div class="col-xs-N">的<div>上拉伸一个大的SVG。 代码是这样的: 任何想法都非常感激。
1回复

为什么可变背景SVG文件无法正确显示所有尺寸?

我目前正在尝试在新的流动站点上为现代浏览器使用svg文件而不是图像。 这个想法是将SVG用作流体div上的背景图片,然后可以在悬停时对其进行更改,并且我们可以使用现代化工具(或类似工具)回退到不受支持的浏览器使用img背景。 从理论上讲,这很好,但是在某些浏览器(尤其是Firefox)上,