我用html, css, JavaScript 制作了如下图标,如何将这图标转化成图片(JPG或PNG格式)?详情见下:

html-css05

我用html, css, JavaScript 制作了如下图标,如何将这图标转化成图片(JPG或PNG格式)?详情见下:,第1张

你不想用 canvas、svg 和任何图片格式的文件,那你只有将图片转换成 Base64 编码来进行读取。

但是 Base64 的图片不宜超过200k,否则不容易被显示,也不建议这么做,图片是可被缓存的,而网页代码不能,因此也代表着这个代码会随着每次访问都被加载一遍,增加不必要的流量和耗时。

Base64工具网站:网页链接

css插入图片方法如下:

操作设备:戴尔笔记本电脑

操作系统:win10

操作程序:html编辑器v8.21

1、打开html编辑器并创建一个新的html文件。

2、新建完一个新的html文件后,在index.html的<style>标签中,输入如下所示的CSS代码。

3、输入完CSS代码之后,接下来运行index.html页面,可以发现,本地图片通过背景图片衜中的本地路径成功调用为了背景图片,图片就成功加入了。