我们在使用<img>标签和给元素添加背景图片时，不一定要使用外部的图片地址，也可以直接把图片数据定义在页面上。对于一些“小”的数据，可以在网页中直接嵌入，而不是从外部文件载入。

如何使用

.CSS

p {
    background: url(data:image/gif;base64,R0lGOD......jIQA7) no-repeat left center;
    padding: 5px 0 5px 25px;
}

或

p {
    background: url(fakepath/image.gif) no-repeat left center;
    padding: 5px 0 5px 25px;
}

HTML

<img src="data:image/jpeg;base64,/9j/4Q......vxvitd6SF//2Q==" />

或

<img src="fakepath/image.gif" />

语法：

data:[<mime type>][;charset=<charset>][;base64],<encoded data>

* data的一些类型：

data:,文本数据
data:text/plain,文本数据
data:text/html,HTML代码
data:text/html;base64,base64编码的HTML代码
data:text/css,CSS代码
data:text/css;base64,base64编码的CSS代码
data:text/JavaScript,Javascript代码
data:text/javascript;base64,base64编码的Javascript代码
data:image/gif;base64,base64编码的gif图片数据
data:image/png;base64,base64编码的png图片数据
data:image/jpeg;base64,base64编码的jpeg图片数据
data:image/x-icon;base64,base64编码的icon图片数据

好处：

减少HTTP请求

浏览器兼容性：

IE7及以下不支持。有如下解决方案：

使用IE条件注释

 <!--[if lt IE 8]>

    ...... IE7及以下内容 ......

<![endif]-->

 

CSS背景

1.首先用编辑器打开需要用到的svg文件，复制源代码

2.打开在线URL编码工具http://tool.oschina.net/encode?type=4

3.把复制的源代码粘贴至左侧的url文本框，然后点击中间的“url编码”按钮

4.复制编码结果，粘贴到CSS背景设置里(示例的svg为一个loading图标)
background-image: url(‘data:image/svg+xml;%20charset=utf8,这里放复制的的代码‘);

.test {
background-image: url('data:image/svg+xml;charset=utf8,xmlversion1.0standaloneno!DOCTYPEsvgPUBLIC-W3CDTDSVG1.1ENhttpwww.w3.orgGraphicsSVG1.1DTDsvg11.dtdsvgt1533795489550classiconstyleviewBox0010241024version1.1xmlnshttpwww.w3.org2000svgp-id4754xmlnsxlinkhttpwww.w3.org1999xlinkwidth32height32defsstyletypetextcssstyledefspathdM227.9484.9c11.611.617.325.517.341.9s-5.830.2-17.341.9S202.4586186586s-30.2-5.8-41.9-17.3-17.3-25.5-17.3-41.95.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.35.841.917.3zM333.7244c14.514.521.83221.852.3s-7.337.7-21.852.3c-14.514.6-3221.9-52.321.9-20.30-37.7-7.2-52.3-21.8s-21.8-32-21.8-52.3c0-20.37.2-37.721.8-52.3s32-21.852.3-21.8c20.3037.77.252.321.7zm-10.4471.6c11.611.617.325.517.341.9s-5.830.2-17.341.9c-11.611.6-25.517.3-41.917.3-16.10-29.9-5.9-41.7-17.6-11.7-11.7-17.6-25.6-17.6-41.70-16.45.8-30.217.3-41.911.6-11.625.5-17.341.9-17.3s30.45.84217.4zM575137.9c17.217.325.938.225.963s-8.745.6-25.963c-17.317.3-38.225.9-6325.9s-45.6-8.7-63-25.9c-17.3-17.2-25.9-38.2-25.9-63s8.7-45.625.9-63c17.2-17.238.2-25.963-25.924.7045.68.76325.9zm-21.2673c11.611.617.325.517.341.9s-5.830.2-17.341.9c-11.611.6-25.517.3-41.917.3s-30.2-5.8-41.9-17.3c-11.7-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.35.841.917.3zm292.4-514.5c028.7-10.253.2-30.673.4-20.320.2-44.830.2-73.130.2-28.70-53.2-10.1-73.4-30.2-20.2-20.2-30.2-44.7-30.2-73.40-28.410.1-52.830.2-73.120.2-20.344.7-30.673.4-30.628.4052.810.273.130.620.420.230.644.630.673.1zm-44.5461.1c016.1-5.929.9-17.641.7-11.711.7-25.617.6-41.717.6-16.40-30.2-5.8-41.9-17.3-11.6-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.25.841.917.3c11.611.517.425.417.441.8zm78.1-272.6c11.611.617.325.517.341.9s-5.830.2-17.341.9S854.3586838586s-30.2-5.8-41.9-17.3c-11.6-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.316.2030.35.841.817.3zp-id4755pathsvg');
}

before、after伪类内容
用法跟背景基本一致，区别是放在伪类的content属性值里
content: url(‘data:image/svg+xml;%20charset=utf8,这里放复制的的代码‘);

.test:before {
content: url('data:image/svg+xml;charset=utf8,xmlversion1.0standaloneno!DOCTYPEsvgPUBLIC-W3CDTDSVG1.1ENhttpwww.w3.orgGraphicsSVG1.1DTDsvg11.dtdsvgt1533795489550classiconstyleviewBox0010241024version1.1xmlnshttpwww.w3.org2000svgp-id4754xmlnsxlinkhttpwww.w3.org1999xlinkwidth32height32defsstyletypetextcssstyledefspathdM227.9484.9c11.611.617.325.517.341.9s-5.830.2-17.341.9S202.4586186586s-30.2-5.8-41.9-17.3-17.3-25.5-17.3-41.95.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.35.841.917.3zM333.7244c14.514.521.83221.852.3s-7.337.7-21.852.3c-14.514.6-3221.9-52.321.9-20.30-37.7-7.2-52.3-21.8s-21.8-32-21.8-52.3c0-20.37.2-37.721.8-52.3s32-21.852.3-21.8c20.3037.77.252.321.7zm-10.4471.6c11.611.617.325.517.341.9s-5.830.2-17.341.9c-11.611.6-25.517.3-41.917.3-16.10-29.9-5.9-41.7-17.6-11.7-11.7-17.6-25.6-17.6-41.70-16.45.8-30.217.3-41.911.6-11.625.5-17.341.9-17.3s30.45.84217.4zM575137.9c17.217.325.938.225.963s-8.745.6-25.963c-17.317.3-38.225.9-6325.9s-45.6-8.7-63-25.9c-17.3-17.2-25.9-38.2-25.9-63s8.7-45.625.9-63c17.2-17.238.2-25.963-25.924.7045.68.76325.9zm-21.2673c11.611.617.325.517.341.9s-5.830.2-17.341.9c-11.611.6-25.517.3-41.917.3s-30.2-5.8-41.9-17.3c-11.7-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.35.841.917.3zm292.4-514.5c028.7-10.253.2-30.673.4-20.320.2-44.830.2-73.130.2-28.70-53.2-10.1-73.4-30.2-20.2-20.2-30.2-44.7-30.2-73.40-28.410.1-52.830.2-73.120.2-20.344.7-30.673.4-30.628.4052.810.273.130.620.420.230.644.630.673.1zm-44.5461.1c016.1-5.929.9-17.641.7-11.711.7-25.617.6-41.717.6-16.40-30.2-5.8-41.9-17.3-11.6-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.3s30.25.841.917.3c11.611.517.425.417.441.8zm78.1-272.6c11.611.617.325.517.341.9s-5.830.2-17.341.9S854.3586838586s-30.2-5.8-41.9-17.3c-11.6-11.6-17.3-25.5-17.3-41.9s5.8-30.217.3-41.9c11.6-11.625.5-17.341.9-17.316.2030.35.841.817.3zp-id4755pathsvg');
}