Skip to content
Back to blog

如何在html或CSS中插入Base64字符串?

Leibniz Li

@leibnizli
+

HTML和CSS文件都支持使用Base64数据字符串。复制下面标签中的代码,并将“YOUR_BASE64_STRING”替换为您自己的Base64字符串。

HTML 中 Base64 的使用

  • JPEG: <img src="data:image/jpeg;base64,YOUR_BASE64_STRING"/>
  • PNG: <img src="data:image/png;base64,YOUR_BASE64_STRING"/>
  • GIF: <img src="data:image/gif;base64,YOUR_BASE64_STRING"/>
  • SVG: <img src="data:image/svg+xml;base64,YOUR_BASE64_STRING"/>
  • JAVASCRIPTS: <script type="text/javascript" src="data:text/javascript;base64,YOUR_BASE64_STRING"></script>
  • CSS: <link rel="stylesheet" type="text/css" href="data:text/css;base64,YOUR_BASE64_STRING"/>

Base64 在 CSS 中的使用

  • IMAGES: .yourclass {background: url('data:image/jpeg;base64,YOUR_BASE64_STRING');}
  • FONTS:
    @font-face {
        font-family: 'yourfontname';
        src: local("yourfontname"),
            url(data:font/opentype;charset=utf-8;base64,YOUR_BASE64_STRING),
            url(data:application/font-woff;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff),
            url(data:application/font-woff2;charset=utf-8;base64,YOUR_BASE64_STRING) format(woff2),
            url(data:application/font-ttf;charset=utf-8;base64,YOUR_BASE64_STRING) format('truetype');
    }
    

base64 decoding/base64 encoding


Docs

Learn more documentation

ARayOfSunshine provides some small and beautiful apps, including macOS, Windows, iOS, and iPadOS. Using them can make your life more convenient. If you have a better idea don't hesitate to tell us.

Learn more