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其实是图片的内容,浏览器无需请求服务器,就能够直接解析还原图片,主要目的是减少浏览器和服务器之间的连接数,能提高服务器的并发数和节省带宽




你可能感兴趣的:(base64,url,前端)