myblogsgl/public/blend.html

135 lines
4.2 KiB
HTML

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>
Blend parts of faces of characters in F.COMPO (组合F.COMPO角色的面部五官)
</title>
<!--
It's wierd that reference blend.css doesn't work,
so I have to hardcode the css code here.
<link rel="stylesheet" href="styles/blend.css">
-->
<!-- I have to hardcode the css code here. -->
<style>
#example {
width: 401px;
height: 302px;
background-repeat: no-repeat;
background-image:
url("../project/hair/hair__-_.png"),
url("../project/brow/brow__-_.png"),
url("../project/eye/eye__-_.png"),
url("../project/nose/nose__-_.png"),
url("../project/mouth/mouth__-_.png"),
url("../project/face/face__-_.png");
background-blend-mode: multiply;
}
textarea {
vertical-align: top;
width: 800px;
height: 40px;
}
</style>
</head>
<body>
<h1>Blend parts of faces of characters in F.COMPO <br>
(<span lang="zh">组合F.COMPO角色的面部五官</span>)
</h1>
<p>
This page is a part of the article(<span lang="zh">本页面源自文章</span>): <br>
<a href="https://gitea.com/city4cat/myblogsgl/src/branch/master/hojocn/fc_drawing_style__face_composition/">
https://gitea.com/city4cat/myblogsgl/src/branch/master/hojocn/fc_drawing_style__face_composition/
</a><br>
(see also
<a href="https://gitlab.com/city4cat/myblogs/-/tree/master/hojocn/fc_drawing_style__face_composition/">
https://gitlab.com/city4cat/myblogs/-/tree/master/hojocn/fc_drawing_style__face_composition/
</a> )
</p>
<!-- id=example blends and displays the background images-->
<div id="example">
</div>
<form>
<ul>
Hair(<span lang="zh">头发</span>):
<select id="select_hair" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
Brow(<span lang="zh"></span>):
<select id="select_brow" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
Eye(<span lang="zh"></span>):
<select id="select_eye" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
Nose(<span lang="zh"></span>):
<select id="select_nose" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
Mouth(<span lang="zh"></span>):
<select id="select_mouth" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
Face(<span lang="zh">脸庞</span>):
<select id="select_face" class="blends">
<!-- menu itmes are generated in ui-select-menuitems.js -->
</select>
<br>
<p>
<li>
The root directory of the image is needed to load the image. Examples: <br>
(<span lang="zh">需设置图片文件所在的根目录。例子:</span> )<br>
../project <br>
https://gitea.com/city4cat/myblogsgl/raw/branch/master/hojocn/fc_drawing_style__face_composition/project<br>
https://gitlab.com/city4cat/myblogs/-/raw/master/hojocn/fc_drawing_style__face_composition/project<br>
<br>
<label for="image_root_dir">
Set the root directory of images:<br>
(<span lang="zh">设置图片文件所在的根目录:</span>)<br>
</label>
<br>
<textarea id="image_root_dir">https://gitea.com/city4cat/myblogsgl/raw/branch/master/hojocn/fc_drawing_style__face_composition/project</textarea>
</li>
</p>
<p>
<li>
"FC"
<span lang="zh">是北条司作品</span>
"Family Compo"
<span lang="zh">的缩写,该作品的其他名称有</span>:
<span lang="ja">ファミリーコ ンポ</span> /
F.COMPO / FamilyCompo /
<span lang="zh"> 非常家庭 / 搞怪家庭(港) / 变奏家族(台) / 反串家族(新加坡)</span>
</li>
</p>
</ul>
</form>
<script src="scripts/ui-select-menuitems.js"></script>
<script src="scripts/blend.js"></script>
</body>
</html>