nodes/SoftMeng-ComfyUI_Mexx_Poster
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

# feat: 使用绝对路径

Browse Source
This commit is contained in:
xiangyuanmeng
2023-12-05 17:44:26 +08:00
parent 9cbef1127f
commit 5360c7383e
2 changed files with 193 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
card_big/poster.css
+146
View File
@@ -0,0 +1,146 @@
@font-face {
font-family: 'gaoduanhei';
src: url('{current_directory}/asset/font/gaoduanhei.ttf');
}
@font-face {
font-family: 'NotoSansHans-DemiLight';
src: url('{current_directory}/asset/font/NotoSansHans-DemiLight.otf');
}
@font-face {
font-family: 'xintangren';
src: url('{current_directory}/asset/font/xintangren.ttf');
}
skill-description {
font-size: 1.4em;
}
.card {
position: relative;
width: 732px;
height: 1024px;
border-radius: 15px;
border: 1px solid black;
background-color: white;
}
.frame-top {
position: absolute;
top: 130px;
right: 1%;
width: 90%;
height: 5%;
border-color: {color1};
border-style: solid;
border-width: 6px 0px 0px 0px;
}
.frame-right {
position: absolute;
top: 40px;
right: 9%;
width: 5%;
height: 900px;
border-color: {color2};
border-style: solid;
border-width: 0px 8px 0px 0px;
}
.card-image {
position: relative;
width: 76%;
height: 80%;
margin: 18% 11% 12% 13%;
background-size: cover;
background-color: #cccccc;
background-repeat: no-repeat;
background-position: center;
box-shadow: 0 0 20px 20px white inset;
}
.blur-background {
position: absolute;
top: 0;
-webkit-filter: blur(8px);
-moz-filter: blur(8px);
-o-filter: blur(8px);
-ms-filter: blur(8px);
filter: blur(5px);
width: 100%;
height: 100px;
background-color: white;
opacity: 0.4;
}
.card-header {
position: absolute;
top: 0px;
width: 100%;
}
.clan {
font-size: 7.6em;
margin: 1% 2% 2% 3%;
display: inline-block;
vertical-align: top;
font-family: 'gaoduanhei';
color: black;
}
.blood {
display: inline-block;
vertical-align: top;
margin-top: 6%;
width: 60px;
height: 60px;
background-size: auto 100%;
background-image: url("{current_directory}/asset/blood.png");
background-repeat: no-repeat;
background-position: center;
}
.profile-section {
position: absolute;
top: 200px;
left: 2%;
width: 96%;
opacity: 0.9;
border-radius: 10px;
}
.nickname {
font-family: 'xintangren';
font-size: 3.2em;
margin: 2%;
width: 5%;
color: {color3};
text-shadow: 4px 4px 4px white;
}
.name {
font-family: 'xintangren';
font-size: 6.0em;
margin: 40px 0px 0px 0px;
width: 5%;
color: {color3};
text-shadow: 0px 0px 0px white;
}
.skill-section {
position: absolute;
bottom: 1%;
left: 4%;
width: 92%;
margin-bottom: 2%;
background-color: #E2ECFA;
opacity: 0.9;
border-radius: 5px;
}
.skill-block {
margin: 10px;
}
.skill-block div {
display: inline-block;
vertical-align: top;
}
.skill-title-content {
font-family: 'gaoduanhei';
font-size: 2.4em;
width: 15%;
}
.skill-description-content {
font-family: 'NotoSansHans-DemiLight';
font-size: 1.2em;
width: 83%;
}
card_big/poster.html
+47
View File
@@ -0,0 +1,47 @@
<div id="card" class="card">
<!-- 角色图片 见CSS部分 -->
<div class="card-image" style="background-image: url('{os_path_join_file}')">
</div>
<div class="frame-top"></div>
<div class="frame-right"></div>
<div class="blur-background"></div>
<div class="card-header">
<!-- 部落 开始 -->
<div class="clan">{clan}</div>
<!-- 部落 结束 -->
<!-- 调节血量 开始 -->
<div class="blood"></div>
<div class="blood"></div>
<div class="blood"></div>
<!-- 调节血量 结束 -->
</div>
<!-- 角色描述 开始 -->
<div class="profile-section">
<div class="nickname">
<b>{nickname}</b>
</div>
<div class="name">
{name}
</div>
</div>
<!-- 角色描述 结束 -->
<!-- 技能描述 开始 -->
<div class="skill-section">
<div class="skill-block">
<div class="skill-title-content">
<b>{title1}</b>
</div>
<div class="skill-description-content">
<skill-description>
{description1}
</skill-description>
</div>
</div>
</div>
<!-- 技能描述 结束 -->
</div>