CSS背景图片使用SVG图片的方法
墨初 Web前端 949阅读
在CSS中使用SVG图片做为背景图有两种方法，下面73so的小编就详细的说一下。
CSS背景图使用SVG图片的方法
方法1：
将SVG代码直接插入HTML文档中，然后使用CSS选择器将其设置为背景图。这种方法的优点是可以轻松地更改SVG的颜色和其他属性。
例：
<style>
.svgbg {
background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="%23FF0000"/></svg>');
width: 200px;
height: 200px;
}
</style>
<div class="svgbg"></div>方法2：
可以在CSS中引入外部的svg图片，使用CSS中的url()函数引用它。这种方法的优点是可以将SVG文件与HTML文档分离，便于管理和缓存。
例：
<style>
.svgbg {
background-image: url('svg.svg');
width: 200px;
height: 200px;
}
</style>
<div class="svgbg"></div>以上就是CSS代码中使用SVG图片做为背景图的方法，大家可以参考一下。