data:image/png;base64 如何将自己的图片生成Base64编码

本文介绍如何将图片转换为Base64编码,并在HTML和CSS中引用该编码,实现图片的内联显示,适用于资源文件较小的场景,提高网页加载速度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

看到图片是这样一串码:

url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAMCAYAAAC9QufkAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAELSURBVChTdZKxTgJREEUXgomEWFnQGxsa9R+Qwk8wobCzhEhIqChorS2gN7EwFvyCf2Bh6GgstaA1sMu5w2Vxg5zk5s07M5PNbjY5RJqmF6RHHsip9WGyLCszeE+W1BnnL/kic/JOqh7dh+ajlgT1hKPiVqBl3JmvO5BXWhIM3VrnoEv4V7IgdesNiKkXn60K4LvqC+oZx1E0KPSuKzcuQ/5BjqTqb+H6pkbP9wL4E+/m4J7ca1qF/IwNoNYTrt3KwVVo/cQQ38c6lmvkW5ZzZF0A33d/wXFsvQHZIC80SlaB7viOFgV126196N8xcENa1APOj9gC6qHH/ocBvcKY5F+XUn/XuUdMkqwBP3BY37JIuDAAAAAASUVORK5CYII=)

那么如何生成的尼.

 

在在线工具加入小图片自动生成:

https://www.css-js.com/tools/base64.html

 

然后引用时:

// Base64 在CSS中的使用

.box{ background-image: url("data:image/jpg;base64,/9j/4QMZR..."); }

// Base64 在HTML中的使用

<img src="data:image/jpg;base64,/9j/4QMZR..." />

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值