CSS 使用 SVG 作为背景图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9185434/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using SVG as background image
提问by Dirty Bird Design
I can't seem to get this to work as desired. My page changes height based on what content is loaded and if it requires a scroll, the svg doesn't seem to be stretching...
我似乎无法让它按预期工作。我的页面根据加载的内容更改高度，如果需要滚动，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 width="1024" height="800" 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-width="0" x="0" y="0" width="1024" height="800" id="svg_1"/>
</g>
<g>
<title>Layer 2</title>
<rect id="svg_3" height="282" width="527" y="1" x="1" stroke-width="0" fill="url(#svg_2)"/>
<rect id="svg_4" height="698" width="1021.99999" y="1" x="1" stroke-width="0" fill="url(#svg_5)"/>
</g>
</svg>Is it possible to do this with just CSS3? I'd like to not have to load ANOTHER JS library or call...Any ideas? Thanks!
是否可以仅使用 CSS3 来做到这一点？我不想加载另一个 JS 库或调用...有什么想法吗？谢谢！
采纳答案by AlexNikonov
With my solution you're able to get something similar:
使用我的解决方案，您可以获得类似的东西：
Here is bulletproff solution:
这是bulletprooff解决方案：
Your html:
<input class='calendarIcon'/>
你的html：
<input class='calendarIcon'/>
Your SVG: i used fa-calendar-alt
您的SVG：我使用了 fa-calendar-alt
(any IDEmay open svg image as shown below)
（任何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>
<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>
To use it at css background-imageyou gotta encode the svg to address valid string. I used this tool
要在css background-image 中使用它，您必须对 svg 进行编码以寻址有效字符串。我用过这个工具
As far as you got all stuff you need, you're coming to css
只要你得到了你需要的所有东西，你就来了css
.calendarIcon{
//your url will be something like this:
background-image: url("data:image/svg+xml,***<here place encoded svg>***");
background-repeat: no-repeat;
}
Note: these styling wont have any effect on encoded svg image
注意：这些样式不会对编码的 svg 图像产生任何影响
.{
fill: #f00; //neither this
background-color: #f00; //nor this
}
because all changes over the imagemust be applied directly to its svg code
因为对图像的所有更改都必须直接应用于其 svg 代码
<svg xmlns="" path="" fill="#f00"/></svg>
<svg xmlns="" path="" fill="#f00"/></svg>
To achive the location righthand i copied some Bootstrap spacing and my final css get the next look:
为了获得正确的位置，我复制了一些 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);
}
回答by Erik Dahlstr?m
You can try removing the widthand heightattributes on the svg root element, adding preserveAspectRatio="none" viewBox="0 0 1024 800"instead. It makes a difference in Opera at least, assuming you wanted the svg to stretch to fill the entire region defined by the CSS styles.
您可以尝试删除svg 根元素上的width和height属性，preserveAspectRatio="none" viewBox="0 0 1024 800"改为添加。至少在 Opera 中有所不同，假设您希望 svg 拉伸以填充由 CSS 样式定义的整个区域。
回答by methodofaction
Try placing it on your body
试着把它放在你的 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;
}
回答by Ricardo Parker
You have set a fixed width and height in your svg tag. This is probably the root of your problem. Try not removing those and set the width and height (if needed) using CSS instead.
您已在 svg 标签中设置了固定的宽度和高度。这可能是您问题的根源。尽量不要删除它们，而是使用 CSS 设置宽度和高度（如果需要）。
