html 화면 크기를 늘리면 backgroud 이미지랑 텍스트랑 분리되는데 함께 움직이게 하려면 어떻게 해야 할까요?
조회수 466회
html은 이렇고
<rolltemplate class="sheet-rolltemplate-coc-1">
<table>
<td class="template_value" style="color:white; style="font-size:1.2em;">. </td>
<tr>
<td class="template_value" style="color:white; style="font-size:1.2em;">. </td>
<tr>
<td class="template_value" style="font-size:0.7em;">{{name}} 판정 </td>
<tr>
<td class="template_value" style="font-size:2em;" "font-wight:bold;">{{roll1}}</td>
</tr>
<tr>
<td class="template_value" style="font-size:0.5em;">{{success}}◈{{hard}}◈{{extreme}}</td>
</tr>
<tr style="background:none;">
<!-- 01 is always Critical -->
{{#rollTotal() roll1 1}}
<td style="background-color:transparent; background: url(https://imgur.com/JIqTVKm.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="critical">Critical</b></td>
{{/rollTotal() roll1 1}}
<!-- Is Success -->
{{#rollBetween() roll1 2 success}}
<!-- Is Standard -->
{{#rollGreater() roll1 hard}}
<td style="background-color:transparent; background: url(https://imgur.com/n32PFNH.png); background-repeat:no-repeat;" class="template_value" data-i18n="success">Success</td>
{{/rollGreater() roll1 hard}}
<!-- Is Hard or Extreme -->
{{#rollBetween() roll1 2 hard}}
<!-- Is Hard -->
{{#rollGreater() roll1 extreme}}
<td style="background-color:transparent; background: url(https://imgur.com/2Eixp4M.png); background-repeat:no-repeat;" class="template_value" data-i18n="hard">Hard</td>
{{/rollGreater() roll1 extreme}}
<!-- Is Extreme -->
{{#rollBetween() roll1 2 extreme}}
<td style="background-color:transparent; background: url(https://imgur.com/FghcCL9.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="extreme">Extreme</b></td>
{{/rollBetween() roll1 2 extreme}}
{{/rollBetween() roll1 2 hard}}
{{/rollBetween() roll1 2 success}}
<!-- Is Not Success -->
{{#rollGreater() roll1 success}}
<!-- Is skill >= 50 -->
{{#rollGreater() success 49}}
<!-- Is Fumble -->
{{#rollTotal() roll1 100}}
<td style="background-color:transparent; background: url(https://imgur.com/ih4GR4B.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="fumble">Fumble</b></td>
{{/rollTotal() roll1 100}}
<!-- Is Fail -->
{{#rollLess() roll1 100}}
<td style="background-color:transparent; background: url(https://imgur.com/QnycOE3.png); background-repeat:no-repeat;" class="template_value" data-i18n="fail"><span style="color:white;">Fail</span></td> {{/rollLess() roll1 100}}
{{/rollGreater() success 49}}
<!-- Is skill < 50 -->
{{#rollLess() success 50}}
<!-- Is Fumble -->
{{#rollGreater() roll1 95}}
<td style="background-color:transparent; background: url(https://imgur.com/ih4GR4B.png); background-repeat:no-repeat;" class="template_value"><b data-i18n="fumble">Fumble</b></td>
{{/rollGreater() roll1 95}}
<!-- Is Fail -->
{{#rollLess() roll1 96}}
<td style="background-color:transparent; background: url(https://imgur.com/QnycOE3.png); background-repeat:no-repeat;" class="template_value" data-i18n="fail">Fail</td>
{{/rollLess() roll1 96}}
{{/rollLess() success 50}}
{{/rollGreater() roll1 success}}
</td>
</tr>
<td class="template_value" style="color:white; style="font-size:1.2em;">. </td>
<tr>
<table border=1 width=100 style="table-layout: fixed" >
</table>
</rolltemplate>
css는 이렇습니다.
/* simple (no PD/BD) rolltemplate */
.sheet-rolltemplate-coc-1 table {
width: 100%;
border: none;
line-height: 1.8em;
background: url(https://imgur.com/LIdPVuo.png);
background-repeat:no-repeat;
font-weight: bold;
}
.sheet-rolltemplate-coc-1 caption {
text-align: center;
background: black;
color: white;
font-weight: bold;
padding: 2px;
border: 1px solid black;
line-height: 1.6em;
}
sheet-rolltemplate-coc-1 td {
padding: 2px;
border-bottom: 1px solid black;
}
.sheet-rolltemplate-coc-1 td.sheet-template_label {
font-weight: bold;
}
.sheet-rolltemplate-coc-1 td.sheet-template_value {
text-align: center;
}
.sheet-rolltemplate-coc-1 .inlinerollresult {
display: inline-block;
min-width: 1.5em;
text-align: center;
border:0.1px dashed white;
background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.fullcrit {
border: none;
background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.fullfail {
border:none;
background: none;
}
.sheet-rolltemplate-coc-1 .inlinerollresult.importantroll {
border:none;
background:none;
}
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
댓글 입력