CSS3引用SVG base64的方法

最新推荐文章于 2024-07-07 21:27:28 发布

david10000

最新推荐文章于 2024-07-07 21:27:28 发布

阅读量1.9k

点赞数

本文链接：https://blog.csdn.net/david10000/article/details/104615871

版权

在做Thingsboard 的控件的时候，想一个div 里边有一个背景图，效果如下：

当时就想这个改怎么做呢，经过一番考虑我决定用SVG图，但是TB里边不能直接用，所有就像是不是可以一个DIV 指定一个背景，背景就用SVG转base64的数据来做。

1、首先去阿里那边搞一个SVG 过来：

https://www.iconfont.cn/search/index?q=device

2、然后到另外一个网站去转：https://base64.guru/converter/encode/image/svg

转换后做一个img标签：

<img height="80px" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzMTM4Njc2Nzg0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTEyOCAyNTZoNzY4VjE3MC42NjY2NjdIMTI4Yy00Ni45MzMzMzMgMC04NS4zMzMzMzMgMzguNC04NS4zMzMzMzMgODUuMzMzMzMzdjUxMmMwIDQ2LjkzMzMzMyAzOC40IDg1LjMzMzMzMyA4NS4zMzMzMzMgODUuMzMzMzMzaDE3MC42NjY2Njd2LTg1LjMzMzMzM0gxMjhWMjU2eiBtNDI2LjY2NjY2NyAyNTZoLTE3MC42NjY2Njd2NzUuOTQ2NjY3Yy0yNi4wMjY2NjcgMjMuNDY2NjY3LTQyLjY2NjY2NyA1Ni45Ni00Mi42NjY2NjcgOTQuNzJzMTYuNjQgNzEuMjUzMzMzIDQyLjY2NjY2NyA5NC43MlY4NTMuMzMzMzMzaDE3MC42NjY2Njd2LTc1Ljk0NjY2NmMyNi4wMjY2NjctMjMuNDY2NjY3IDQyLjY2NjY2Ny01Ni45NiA0Mi42NjY2NjYtOTQuNzJzLTE2LjY0LTcxLjI1MzMzMy00Mi42NjY2NjYtOTQuNzJWNTEyeiBtLTg1LjMzMzMzNCAyMzQuNjY2NjY3Yy0zNS40MTMzMzMgMC02NC0yOC41ODY2NjctNjQtNjRzMjguNTg2NjY3LTY0IDY0LTY0IDY0IDI4LjU4NjY2NyA2NCA2NC0yOC41ODY2NjcgNjQtNjQgNjR6IG00NjkuMzMzMzM0LTQwNS4zMzMzMzRINjgyLjY2NjY2N2MtMjEuMzMzMzMzIDAtNDIuNjY2NjY3IDIxLjMzMzMzMy00Mi42NjY2NjcgNDIuNjY2NjY3djQyNi42NjY2NjdjMCAyMS4zMzMzMzMgMjEuMzMzMzMzIDQyLjY2NjY2NyA0Mi42NjY2NjcgNDIuNjY2NjY2aDI1NmMyMS4zMzMzMzMgMCA0Mi42NjY2NjctMjEuMzMzMzMzIDQyLjY2NjY2Ni00Mi42NjY2NjZWMzg0YzAtMjEuMzMzMzMzLTIxLjMzMzMzMy00Mi42NjY2NjctNDIuNjY2NjY2LTQyLjY2NjY2N3ogbS00Mi42NjY2NjcgNDI2LjY2NjY2N2gtMTcwLjY2NjY2N1Y0MjYuNjY2NjY3aDE3MC42NjY2Njd2MzQxLjMzMzMzM3oiIHAtaWQ9IjI1ODQiIGZpbGw9IiNjZGNkY2QiPjwvcGF0aD48L3N2Zz4=" />

这样就显示出来了。

3 如果是想放到DIV的背景，就给div 的cSS 选择器加上

  background-repeat:no-repeat;
        background-size:contain;
        background-position:right;

        
           background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+PHN2ZyB0PSIxNTgzMTM4Njc2Nzg0IiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI1ODMiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxkZWZzPjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+PC9zdHlsZT48L2RlZnM+PHBhdGggZD0iTTEyOCAyNTZoNzY4VjE3MC42NjY2NjdIMTI4Yy00Ni45MzMzMzMgMC04NS4zMzMzMzMgMzguNC04NS4zMzMzMzMgODUuMzMzMzMzdjUxMmMwIDQ2LjkzMzMzMyAzOC40IDg1LjMzMzMzMyA4NS4zMzMzMzMgODUuMzMzMzMzaDE3MC42NjY2Njd2LTg1LjMzMzMzM0gxMjhWMjU2eiBtNDI2LjY2NjY2NyAyNTZoLTE3MC42NjY2Njd2NzUuOTQ2NjY3Yy0yNi4wMjY2NjcgMjMuNDY2NjY3LTQyLjY2NjY2NyA1Ni45Ni00Mi42NjY2NjcgOTQuNzJzMTYuNjQgNzEuMjUzMzMzIDQyLjY2NjY2NyA5NC43MlY4NTMuMzMzMzMzaDE3MC42NjY2Njd2LTc1Ljk0NjY2NmMyNi4wMjY2NjctMjMuNDY2NjY3IDQyLjY2NjY2Ny01Ni45NiA0Mi42NjY2NjYtOTQuNzJzLTE2LjY0LTcxLjI1MzMzMy00Mi42NjY2NjYtOTQuNzJWNTEyeiBtLTg1LjMzMzMzNCAyMzQuNjY2NjY3Yy0zNS40MTMzMzMgMC02NC0yOC41ODY2NjctNjQtNjRzMjguNTg2NjY3LTY0IDY0LTY0IDY0IDI4LjU4NjY2NyA2NCA2NC0yOC41ODY2NjcgNjQtNjQgNjR6IG00NjkuMzMzMzM0LTQwNS4zMzMzMzRINjgyLjY2NjY2N2MtMjEuMzMzMzMzIDAtNDIuNjY2NjY3IDIxLjMzMzMzMy00Mi42NjY2NjcgNDIuNjY2NjY3djQyNi42NjY2NjdjMCAyMS4zMzMzMzMgMjEuMzMzMzMzIDQyLjY2NjY2NyA0Mi42NjY2NjcgNDIuNjY2NjY2aDI1NmMyMS4zMzMzMzMgMCA0Mi42NjY2NjctMjEuMzMzMzMzIDQyLjY2NjY2Ni00Mi42NjY2NjZWMzg0YzAtMjEuMzMzMzMzLTIxLjMzMzMzMy00Mi42NjY2NjctNDIuNjY2NjY2LTQyLjY2NjY2N3ogbS00Mi42NjY2NjcgNDI2LjY2NjY2N2gtMTcwLjY2NjY2N1Y0MjYuNjY2NjY3aDE3MC42NjY2Njd2MzQxLjMzMzMzM3oiIHAtaWQ9IjI1ODQiIGZpbGw9IiNjZGNkY2QiPjwvcGF0aD48L3N2Zz4=") ;
    }

其中 background-repeat:no-repeat;
background-size:contain;
background-position:right; 这三句话决定了图标的位置。当时也是参照这个文章：https://blog.csdn.net/weixin_34018202/article/details/93560058?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task