CSS 使用 background-image url base64-蒲公英云

CSS 使用 background-image url base64

.six-bottom{box-sizing: border-box;background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE3OTc0RTBEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE3OTc0REZEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODRDNTMyOTZEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODRDNTMyOTdEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7qQFRZAAAAQklEQVR42uzZQQ0AIBADQSD4l1grxcYlzEroPLvbLs3pmACIgAARECACAkRAgAiIgAARECACAkRAPu4m8eEO6gkwAMx0BsCpbAHBAAAAAElFTkSuQmCC) repeat-x bottom #fff;background-size: auto 10px;}

data: —— 获取数据类型名称

image/gif; ——- 指数据类型名称(还有image/png，image/jpeg等等)
base64 ——- 指编码模式

iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE3OTc0RTBEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE3OTc0REZEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODRDNTMyOTZEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODRDNTMyOTdEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7qQFRZAAAAQklEQVR42uzZQQ0AIBADQSD4l1grxcYlzEroPLvbLs3pmACIgAARECACAkRAgAiIgAARECACAkRAPu4m8eEO6gkwAMx0BsCpbAHBAAAAAElFTkSuQmCC

-——- 指编码以后的结果。

这句话的总体意思就是“获取数据类型是image/gif文件，编码采用ASCII 字符，ASCII编码内容是‘

iVBORw0KGgoAAAANSUhEUgAAAGQAAAAUCAYAAAB7wJiVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTE3OTc0RTBEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTE3OTc0REZEOEU5MTFFNDg1QThEMUVDRjEwMDI2NEUiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6ODRDNTMyOTZEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6ODRDNTMyOTdEOEU4MTFFNEE5QkZBQzM4ODk3QUY0OTYiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz7qQFRZAAAAQklEQVR42uzZQQ0AIBADQSD4l1grxcYlzEroPLvbLs3pmACIgAARECACAkRAgAiIgAARECACAkRAPu4m8eEO6gkwAMx0BsCpbAHBAAAAAElFTkSuQmCC

’”。图片的内容经过base64编码了，data:image/gif;base64其实是图片的内容，浏览器无需请求服务器，就能够直接解析还原图片,主要目的是减少浏览器和服务器之间的连接数，能提高服务器的并发数和节省带宽！