CSS 使用 background-image url base64

最新推荐文章于 2024-05-20 22:28:51 发布
最新推荐文章于 2024-05-20 22:28:51 发布
阅读量3.1w 收藏 2
点赞数 1
分类专栏： 前端 文章标签： base64 url
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LY_Dengle/article/details/52756220
版权 
.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其实是图片的内容，浏览器无需请求服务器，就能够直接解析还原图片,主要目的是减少浏览器和服务器之间的连接数，能提高服务器的并发数和节省带宽！




湘道
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
background-image:url(data:image/gif;base64,XXXX)
04-01 1万+
background-image:url(data:image/gif;base64,R0lGODlhCwAMAMZjAElxvlNvtVRxtkp1v0p9wVh7vkqBwl58vml6vml7vm19qHJ+qXSBwXiAwHWBv2eFxk+QzHCJx36HwlCUzoKJw3eNyluY1XuQy1Od1lSh2FWi22qe14uaz4ybz2Sn3ZKdxJKeyZWexI+k1
HTML+CSS ---- 背景图片
weixin_55970742的博客
08-13 588
元素设置背景图片，图片在页面上的属性由，大小，位置，显示比例，是否移动，图片源构成。图片的来源可以是本地路径，也可以是BASE64字符串，具体信息如下。
把图片转换成Base64形式存储
最新发布
sun0322
05-20 2600
类来进行Base64编码，它是在Java 8中引入的官方 API，提供了更稳定和可靠的Base64编码功能。最好的做法是事先知道流的大小，或者使用其他方法来准确获取流的大小，比如记录文件大小或者使用其他方式来确定流的结束标记。方法的返回值取决于操作系统和文件系统的不同，可能会导致错误的结果。更为可靠的方式是根据实际读取到的数据大小来确定字节数组的大小。方法来确定流的大小，因为它并不总是返回精确的流大小。方法会返回缓冲区中的字节数，而不是整个流的大小。方法的行为有不同的解释，导致返回值的不确定性。
src或者css背景图的url值为base64编码代码
09-28
base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入
Css中路径data用法
weixin_30535913的博客
08-13 424
Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。 data:,文本数据 data:text/plain,文本数据 data:text/html,HTML代码 data:text/html;base64,base64编码的HTML代码 data:text/css,CSS代码 data:text/css;ba...
background url base64
weixin_33744141的博客
03-10 2628
各自含义：data: ----获取数据类型名称image/gif; -----指数据类型名称base64 -----指编码模式AAAAA ------指编码以后的结果。background-image: url(data:image/gif;base64,AAAA)这句话的意思总体就是“获取数据类型是image gif文件，编码采用ASCII 字符，ASCII编码内容是‘AAAA’”。 b...
CSS中background-image【CSS Sprites，base64编码】
weixin_34290390的博客
06-06 204
CSS中，background可以设置对象的背景样式。如颜色或者使用一张图片代替，今天我要多说两句的就是使用一张图片的参数：image。准确的来说应该是background-image。我们可以这样用它： body{ background-image: url(....jpg); } /* 也可以直接使用background 代替 */ body{...
uni-app背景图片 background-image，支持 base64 格式图片、支持网络路径图片、本地路径背景图片
JEFF_xieyuzhi的博客
10-12 1万+
背景图片 uni-app支持使用在 css 里设置背景图片，使用方式与普通web项目相同，需要注意以下几点： 支持 base64 格式图片。 支持网络路径图片。 使用本地路径背景图片需注意： 图片小于 40kb，uni-app会自动将其转化为 base64 格式； 图片大于等于 40kb， 需开发者自己将其转换为base64格式使用，或将其挪到服务器上，从网络地址引用。 ...
node-css-url-parser:从CSS解析URL
05-03
.image { background-image: url(images/img.png); }' ; var cssUrls = parseCssUrls ( css ) ; console . log ( cssUrls ) ; // [ 'a.css', 'images/img.png' ] 它忽略重复的url和base64编码的资源。 如果未找到...
css-base64-images:CSS文件中的Base64图像
05-27
css-base64-images css文件中的Base64图像。 转换此： .single-quote { background: url('../img/background-pattern.gif'); } 进入 .single-quote { background: url([removed]R0lGODlhBgAGAIAAAObm5vLy8iH/...
CSS中使用image data URI来处理图片的方法
12-13
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAAABHNCSVQICAgIfAhkiAAAAAlwSFlzAAALEwAACxMBAJqcGAAAAE1JREFUKJHV0MEOwCAIA9DW7MP983pymUaweluv8IAABJFUJdWonqEeD0/...
Css图片与Base64互转工具
06-05
在网页设计和开发中，CSS（层叠样式表）用于控制网页元素的外观，而Base64是一种数据编码方式，常用于将二进制数据转换为可直接在文本上下文中使用的ASCII字符串。当我们谈论“Css图片与Base64互转工具”时，我们指...
Java 8实现图片BASE64编解码
09-01
在这个模板中，CSS的`background-image`属性设置为空，准备用Base64编码后的图片数据替换。 接下来，作者编写了一个`Base64Trans`类，包含了三个方法： - `readFile()`：从指定路径读取图片文件的内容并返回一个...
微信小程序背景图片如何设置--如何用background-image Base64设置背景
热门推荐
Fighting社火底子
07-29 18万+
微信小程序通过background-image设置背景：只支持线上图片（url）和base64图片，不支持本地图片；base64图片设置 我是用的是base64 当然我更推荐使用线上图片的url地址 方便内存还小   首先将本地图片到这个网站转码为base64 http://imgbase64.duoshitong.com/ 接着设置wxss内的样式 background-image: 后面...
php将div转图片不显示,base64图片,在background-image中不显示问题解析 - 哦吆～Blog
weixin_36268722的博客
03-09 903
当我们使用PHP将线上图片资源转换为base64图片编码后，图片编码放在 img src中可以正常展示，但如果将其放入CSS样式background-image中时，会出现图片不能正常显示问题，此问题是因为网络上的生成代码往往都使用chunk_split对数据进行了处理，使数据中有了换行chunk_split： 将字符串按指定长度、使用指定字符分隔开来。当网页源代码为如下图所示时，图片不能正常显...
html5css背景图片代码,src或者css背景图的url值为base64编码代码
weixin_28963665的博客
06-04 825
src或者css背景图的url值为base64编码代码发布时间：2013-09-23 10:49:10 作者：佚名 我要评论base64简单地说，它把一些 8-bit 数据翻译成标准 ASCII 字符，网上有很多免费的base64 编码和解码的工具，目前，IE8、Firfox、Chrome、Opera浏览器都支持这种小文件嵌入大家可能注意到了，网页上有些图片的src或css背景图片的ur...
小程序通过background-image设置背景图片
qq_36935391的博客
02-26 2142
微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片；base64图片设置步骤如下：1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本：background-image: url("data:image/png;base64,iVBORw0KGgo=..."...
Base64图片是什么？原理是什么？优缺点是什么？
子玉的博客
09-21 6496
Base64图片是一种将图像数据编码为文本字符串的方法，通常用于将图像嵌入到网页或其他文档中，以减少HTTP请求或实现某些特定的需求。每个块被转换成一个ASCII字符序列，这些字符由64个不同的字符组成，包括大写字母、小写字母、数字和两个特殊字符（通常是"+"和"/"，或者是"-"和"_"，具体字符集可能会有所不同）。总之，Base64图片是一种在某些情况下非常有用的技术，但它应该谨慎使用，特别是对于大型图像或需要频繁更新的图像。所有编码后的块被连接在一起，形成一个Base64编码的文本字符串。
vue使用background-image方式使用svg图片
06-10
要在Vue中使用SVG图片作为背景图像，可以使用CSS的`background-image`属性。以下是一个例子： 1. 首先，在Vue组件中导入SVG文件： ```javascript import mySvg from '@/assets/my-svg.svg'; ``` 2. 接下来，在组件的样式中使用`background-image`属性： ```css .my-element { background-image: url(~@/assets/my-svg.svg); /* 或者，通过导入SVG文件来使用 */ /* background-image: url('data:image/svg+xml;base64,' + btoa(mySvg)); */ /* 注意，这种方法需要使用btoa函数将SVG文件转换为Base64编码 */ } ``` 3. 最后，在组件的模板中使用样式： ```html <template> <div class="my-element"></div> </template> <style scoped> .my-element { width: 100px; height: 100px; } </style> ``` 请注意，使用`background-image`属性时，路径应该是相对于CSS文件的。在Vue中，可以使用`~`符号来代表`src`文件夹，因此可以使用`~@/assets/my-svg.svg`路径来引用SVG文件。 另外，如果SVG文件比较小，也可以将它作为Base64编码的数据URI嵌入样式中，如上面的注释所示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值