metal-background
Version:
metal-background - metal background.
342 lines (333 loc) • 21.7 kB
HTML
<html lang="en">
<!--
Copyright 2024-2025 Yu Hongbo <yuhongbo@member.fsf.org>,
CNOCTAVE <cnoctave@qq.com>
Copying and distribution of this file, with or without modification,
are permitted in any medium without royalty provided the copyright
notice and this notice are preserved. This file is offered as-is,
without any warranty.
-->
<head>
<meta charset="utf-8">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no,initial-scale=1,maximum-scale=1,minimum-scale=1,width=device-width">
<meta name="theme-color" content="#00B4FF">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="msapplication-TileImage" content="favicon.ico">
<meta name="msapplication-TileColor" content="#000000">
<meta name="apple-mobile-web-app-title" content="metal-background文档">
<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" rel="stylesheet" type="text/css">
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/animate.css@^4.0.0/animate.min.css" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.prod.css" rel="stylesheet" type="text/css">
<link href="main.css" rel="stylesheet" type="text/css">
<title>metal-background文档</title>
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<meta name="title" content="metal-background文档" data-qmeta="title">
<meta property="og:title" content="metal-background文档" data-qmeta="ogTitle">
<meta name="twitter:title" content="metal-background文档" data-qmeta="twitterTitle">
<meta name="description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="description">
<meta property="og:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="ogDesc">
<meta name="twitter:description" content="Octave中文网是一个面向中文Octave开发者的交流平台，拥有中文Octave文档、中文Octave论坛和中文Octave新闻等特色。"
data-qmeta="twitterDesc">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
</head>
<body>
<div id="q-app">
<q-layout view="hHh LpR fFf">
<q-header elevated class="bg-primary text-white">
<q-toolbar class="bg-primary text-white q-ny-md shadow-2">
<q-btn stretch flat label="Octave中文网" @click="goTo('http://cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="metal-background文档" @click="scrollToTop()"></q-btn>
<q-separator dark vertical></q-separator>
<q-space></q-space>
<q-separator dark vertical></q-separator>
<q-btn-dropdown stretch flat icon="translate" label="切换文档语言">
<q-list>
<q-item clickable v-close-popup @click="goTo('index.html')">
<q-item-section>
<q-item-label>zh-CN 简体中文</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="中文版Octave文档" @click="goTo('http://docs.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="学术交流论坛" @click="goTo('http://forum.cnoctave.cn')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="新闻" @click="goTo('https://octave.org/news.html')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="使用方法" @click="goTo('https://wiki.octave.org/Using_Octave')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="免费下载" @click="goTo('https://octave.org/download')"></q-btn>
</q-toolbar>
</q-header>
<q-drawer class="bg-primary" show-if-above v-model="leftDrawerOpen" side="left" bordered elevated>
<q-list class="title1 text-white bg-primary">
<q-item clickable v-ripple @click="goToID('#homepage')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
项目首页
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#cdn')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
CDN引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#npm')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
NPM安装
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#import')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
import引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#require')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
require引入方式
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use_css')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用metal-background.css
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#how_to_use_js')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
如何使用metal-background.js
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#live_demo')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
在线演示
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#common_examples')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
常见用例
</q-item-section>
</q-item>
<q-item clickable v-ripple @click="goToID('#references')">
<q-item-section avatar>
<q-icon name="help" />
</q-item-section>
<q-item-section>
引用metal-background
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<div style="position: relative;">
<q-img src="banner0.png" spinner-color="white" style="width: 100%; height: 300px;"></q-img>
<div class="q-mx-md rainbow-text"
style="line-height: 300px; font-size: 100px; position: absolute; left: 0%; top: 0%;">metal-background文档
</div>
</div>
<div class="container">
<div class="main">
<div class="text-h5 q-ma-md text-red-10">欢迎广大开发者将此文档翻译为其他语言。</div>
<q-btn id="homepage" class="title1 text-white bg-primary" stretch flat
label="项目首页：https://github.com/CNOCTAVE/metal-background" @click="goTo('https://github.com/CNOCTAVE/metal-background')"></q-btn>
<q-separator></q-separator>
<div id="cdn" class="title1 q-ma-md text-primary">CDN引入方式</div>
<div class="text-h5 q-ma-md text-red-10">可选引入metal-background.js</div>
<p class="q-ma-md"><script src="https://unpkg.com/metal-background@1.0.0/metal-background.js"></script></p>
<div class="text-h5 q-ma-md text-red-10">可选引入metal-background.css</div>
<p class="q-ma-md"><link rel="stylesheet" href="https://unpkg.com/metal-background@1.0.0/metal-background.css"></p>
<q-separator></q-separator>
<div id="npm" class="title1 q-ma-md text-primary">NPM安装</div>
<p class="q-ma-md">$ npm install metal-background</p>
<q-separator></q-separator>
<div id="import" class="title1 q-ma-md text-primary">import引入方式</div>
<p class="q-ma-md">import MetalBackground from 'path/to/metal-background';</p>
<q-separator></q-separator>
<div id="require" class="title1 q-ma-md text-primary">require引入方式</div>
<p class="q-ma-md">const MetalBackgroundClass = require("path/to/metal-background");</p>
<q-separator></q-separator>
<div id="how_to_use_css" class="title1 q-ma-md text-primary">如何使用metal-background.css</div>
<div class="text-h5 q-ma-md text-red-10">银色背景效果</div>
<p class="q-ma-md">class="metal-background-silver"</p>
<div class="text-h5 q-ma-md text-red-10">暗银色背景效果</div>
<p class="q-ma-md">class="metal-background-darksilver"</p>
<div class="text-h5 q-ma-md text-red-10">亮银色背景效果</div>
<p class="q-ma-md">class="metal-background-brightsilver"</p>
<div class="text-h5 q-ma-md text-red-10">金色背景效果</div>
<p class="q-ma-md">class="metal-background-gold"</p>
<div class="text-h5 q-ma-md text-red-10">暗金色背景效果</div>
<p class="q-ma-md">class="metal-background-darkgold"</p>
<div class="text-h5 q-ma-md text-red-10">亮金色背景效果</div>
<p class="q-ma-md">class="metal-background-brightgold"</p>
<div class="text-h5 q-ma-md text-red-10">铜色背景效果</div>
<p class="q-ma-md">class="metal-background-bronze"</p>
<div class="text-h5 q-ma-md text-red-10">暗铜色背景效果</div>
<p class="q-ma-md">class="metal-background-darkbronze"</p>
<div class="text-h5 q-ma-md text-red-10">亮铜色背景效果</div>
<p class="q-ma-md">class="metal-background-brightbronze"</p>
<div class="text-h5 q-ma-md text-red-10">玫瑰金色背景效果</div>
<p class="q-ma-md">class="metal-background-rosegold"</p>
<div class="text-h5 q-ma-md text-red-10">暗玫瑰金色背景效果</div>
<p class="q-ma-md">class="metal-background-darkrosegold"</p>
<div class="text-h5 q-ma-md text-red-10">亮玫瑰金色背景效果</div>
<p class="q-ma-md">class="metal-background-brightrosegold"</p>
<div class="text-h5 q-ma-md text-red-10">钛色背景效果</div>
<p class="q-ma-md">class="metal-background-titanium"</p>
<div class="text-h5 q-ma-md text-red-10">暗钛色背景效果</div>
<p class="q-ma-md">class="metal-background-darktitanium"</p>
<div class="text-h5 q-ma-md text-red-10">亮钛色背景效果</div>
<p class="q-ma-md">class="metal-background-brighttitanium"</p>
<div class="text-h5 q-ma-md text-red-10">铜绿背景效果</div>
<p class="q-ma-md">class="metal-background-verdigris"</p>
<div class="text-h5 q-ma-md text-red-10">暗铜绿背景效果</div>
<p class="q-ma-md">class="metal-background-darkverdigris"</p>
<div class="text-h5 q-ma-md text-red-10">亮铜绿背景效果</div>
<p class="q-ma-md">class="metal-background-brightverdigris"</p>
<div class="text-h5 q-ma-md text-red-10">胆矾背景效果</div>
<p class="q-ma-md">class="metal-background-bluevitriol"</p>
<div class="text-h5 q-ma-md text-red-10">暗胆矾背景效果</div>
<p class="q-ma-md">class="metal-background-darkbluevitriol"</p>
<div class="text-h5 q-ma-md text-red-10">亮胆矾背景效果</div>
<p class="q-ma-md">class="metal-background-brightbluevitriol"</p>
<q-separator></q-separator>
<div id="how_to_use_js" class="title1 q-ma-md text-primary">如何使用metal-background.js</div>
<div class="text-h5 q-ma-md text-red-10">初始化样式</div>
<p class="q-ma-md">const metalBackground = MetalBackground.init(colors, className = 'metal-background');</p>
<p class="q-ma-md">其中，colors是一个包含所有颜色的数组，至少传入2个色值，例如：['#FF0000', '#00FF00', '#0000FF']</p>
<p class="q-ma-md">如果调用多次init()方法，且className相同，那么样式将被覆盖</p>
<div class="text-h5 q-ma-md text-red-10">添加样式到元素</div>
<p class="q-ma-md">metalBackground.addTo(element);</p>
<div class="text-h5 q-ma-md text-red-10">元素移除样式</div>
<p class="q-ma-md">metalBackground.removeFrom(element);</p>
<div class="text-h5 q-ma-md text-red-10">返回当前样式的CSS代码</div>
<p class="q-ma-md">metalBackground.getCSSCode();</p>
<div class="text-h5 q-ma-md text-red-10">返回当前样式的CSS文本</div>
<p class="q-ma-md">metalBackground.getCSSText();</p>
<q-separator></q-separator>
<div id="live_demo" class="title1 q-ma-md text-primary">在线演示</div>
<div class="text-h5 q-ma-md text-red-10">使用metal-background.css</div>
<iframe src="css_example.html" width="100%" height="700px"></iframe>
<div class="text-h5 q-ma-md text-red-10">使用metal-background.js</div>
<iframe src="js_example.html" width="100%" height="800px"></iframe>
<q-separator></q-separator>
<div id="common_examples" class="title1 q-ma-md text-primary">常见用例</div>
<div class="text-h5 q-ma-md text-red-10">直播</div>
<p class="q-ma-md">在直播时需要吸引眼球的背景效果</p>
<div class="text-h5 q-ma-md text-red-10">视频录制</div>
<p class="q-ma-md">在录制视频时需要特殊风格的文字，和普通的字幕区分开</p>
<div class="text-h5 q-ma-md text-red-10">网站开发</div>
<p class="q-ma-md">根据主题，不同的网站往往需要不同的文字风格</p>
<q-separator></q-separator>
<div id="references" class="title1 q-ma-md text-primary">引用metal-background</div>
<div class="text-h5 q-ma-md text-red-10">如果你在学术研究中涉及metal-background，那么可以按需引用以下内容。</div>
<div class="text-h5 q-ma-md text-red-10">metal-background源码(BibTeX)</div>
<p class="q-ma-md">@misc{CNOCTAVE2025,
author = {Yu Hongbo, },
title = {metal-background},
year = {2025},
howpublished = {\url{https://github.com/CNOCTAVE/metal-background}},
}</p>
<div class="text-h5 q-ma-md text-red-10">metal-background文档(BibTeX)</div>
<p class="q-ma-md">@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},
}</p>
</div>
</div>
<q-toolbar class="bg-grey-8 text-white q-my-md shadow-2">
<q-btn-dropdown stretch flat label="版权所有 ©">
<q-list>
<q-item clickable v-close-popup @click="goTo('http://cnoctave.cn')">
<q-item-section>
<q-item-label>© 2024-2025 CNOCTAVE</q-item-label>
</q-item-section>
</q-item>
<q-item clickable v-close-popup @click="goTo('https://orcid.org/0009-0007-9436-4161')">
<q-item-section>
<q-item-label>© 2024-2025 Yu Hongbo</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-btn-dropdown>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="此文档受Creative Commons Attribution-NoDerivatives 4.0 International License协议保护。"
@click="goTo('https://creativecommons.org/licenses/by-nd/4.0/')"></q-btn>
<q-separator dark vertical></q-separator>
<q-btn stretch flat label="下载此文档的源码"
@click="goTo('https://github.com/CNOCTAVE/metal-background')"></q-btn>
</q-toolbar>
</q-page-container>
</q-layout>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2.17.0/dist/quasar.umd.prod.js"></script>
<script>
const App = {
data() {
return {
scrollToTop() {
window.scrollTo(0, 0);
},
goTo(target) {
window.open(target, '_blank');
},
goToID(target) {
window.open(target, '_self');
},
leftDrawerOpen: true,
};
},
};
const app = Vue.createApp(App);
app.use(Quasar)
app.mount('#q-app')
</script>
<script>
hljs.highlightAll();
</script>
</body>
</html>