hi,欢迎访问本站!
当前位置: 首页Web前端正文

CSS背景图片使用SVG图片的方法

墨初 Web前端 760阅读

在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图片做为背景图的方法,大家可以参考一下。

声明:无特别说明,转载请标明本文来源!
相关推荐