<script src="https://unpkg.com/metal-background@1.0.0/metal-background.js"></script>

<link rel="stylesheet" href="https://unpkg.com/metal-background@1.0.0/metal-background.css">

$ npm install metal-background

import MetalBackground from 'path/to/metal-background';

const MetalBackgroundClass = require("path/to/metal-background");

class="metal-background-silver"

class="metal-background-darksilver"

class="metal-background-brightsilver"

class="metal-background-gold"

class="metal-background-darkgold"

class="metal-background-brightgold"

class="metal-background-bronze"

class="metal-background-darkbronze"

class="metal-background-brightbronze"

class="metal-background-rosegold"

class="metal-background-darkrosegold"

class="metal-background-brightrosegold"

class="metal-background-titanium"

class="metal-background-darktitanium"

class="metal-background-brighttitanium"

class="metal-background-verdigris"

class="metal-background-darkverdigris"

class="metal-background-brightverdigris"

class="metal-background-bluevitriol"

class="metal-background-darkbluevitriol"

class="metal-background-brightbluevitriol"

const metalBackground = MetalBackground.init(colors, className = 'metal-background');

其中，colors是一个包含所有颜色的数组，至少传入2个色值，例如：['#FF0000', '#00FF00', '#0000FF']

如果调用多次init()方法，且className相同，那么样式将被覆盖

metalBackground.addTo(element);

metalBackground.removeFrom(element);

metalBackground.getCSSCode();

metalBackground.getCSSText();

在直播时需要吸引眼球的背景效果

在录制视频时需要特殊风格的文字，和普通的字幕区分开

根据主题，不同的网站往往需要不同的文字风格

@misc{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-background}, year = {2025}, howpublished = {\url{https://github.com/CNOCTAVE/metal-background}}, }

@techreport{CNOCTAVE2025, author = {Yu Hongbo, }, title = {metal-background Document}, institution = {BA DU XIN SHANG}, year = {2025}, number = {16}, month = {6}, url = {https://cnoctave.github.io/metal-background/index.html}, urldate = {2025-06-16}, }