使用 SVG 作为背景图片
Posted
技术标签:
【中文标题】使用 SVG 作为背景图片【英文标题】：Using SVG as background image 【发布时间】：2012-02-29 10:08:41 【问题描述】：我似乎无法让它按预期工作。我的页面根据加载的内容更改高度，如果需要滚动，svg 似乎没有拉伸......
html
height: 100%;
background-image: url(http://www.horizonchampion.eu/themes/projectbase/images/bg.svg);
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size: cover;
<svg xmlns="http://www.w3.org/2000/svg">
<defs>
<radialGradient fy="0.04688" fx="0.48047" r="1.11837" cy="0.04688" cx="0.48047" id="svg_2">
<stop stop-color="#ffffff" offset="0"/>
<stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
</radialGradient>
<radialGradient fy="0.04688" fx="0.48047" r="1.71429" cy="0.04688" cx="0.48047" id="svg_5">
<stop stop-color="#ffffff" offset="0"/>
<stop stop-opacity="0" stop-color="#eaeaea" offset="1"/>
</radialGradient>
</defs>
<g display="inline">
<title>Layer 1</title>
<rect fill="#eaeaea" stroke- x="0" y="0" id="svg_1"/>
</g>
<g>
<title>Layer 2</title>
<rect id="svg_3" y="1" x="1" stroke- fill="url(#svg_2)"/>
<rect id="svg_4" y="1" x="1" stroke- fill="url(#svg_5)"/>
</g>
</svg>仅使用 CSS3 就可以做到这一点吗？我不想加载另一个 JS 库或调用......有什么想法吗？谢谢！
【问题讨论】：
【参考方案1】：使用我的解决方案，您可以获得类似的结果：
这里是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 background-image 中使用它，您必须对 svg 进行编码以处理有效字符串。我用this tool（名称：URL解码器——转换乱码地址）
只要你得到了所有你需要的东西，你就会来到 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>
为了获得右侧的位置，我复制了一些引导间距，我的最终 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);
【讨论】：
【参考方案2】：检查 svg 是否为透明设计，尝试将背景颜色添加到容器中，并检查其对于不同的背景颜色是否可见。
【讨论】：
【参考方案3】：以内容/购物车为中心设置背景 svg
.login-container
justify-content: center;
align-items: center;
display: flex;
height: 100vh;
background-image: url(/assets/images/login-bg.svg);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
【讨论】：
【参考方案4】：您在 svg 标签中设置了固定的宽度和高度。这可能是您问题的根源。尽量不要删除它们，而是使用 CSS 设置宽度和高度（如果需要）。
【讨论】：
【参考方案5】：您可以尝试删除 svg 根元素上的 width 和 height 属性，改为添加 preserveAspectRatio="none" viewBox="0 0 1024 800"。至少在 Opera 中有所不同，假设您希望 svg 拉伸以填充由 CSS 样式定义的整个区域。
【讨论】：
【参考方案6】：试着把它放在你的body
body
height: 100%;
background-image: url(../img/bg.svg);
background-size:100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
background-size:cover;
【讨论】：
在达到 svg 中指定的 800px 高度后，它会不断重复。我尝试将 svg 中的高度和宽度设为 100%，但这只会让情况变得更糟。 你确定它是重复的吗？你有一个从底部向外窥视的带有背景颜色的矩形。 您使用了外部 svg 文件，但许多来到这里的人也希望在 CSS 中找到内联 SVG 的解决方案。以上是关于使用 SVG 作为背景图片的主要内容，如果未能解决你的问题，请参考以下文章