편집 기록

편집 기록
  • 프로필 엽토군님의 편집
    날짜2021.10.05

    html 화면 크기를 늘리면 backgroud 이미지랑 텍스트랑 분리되는데 함께 움직이게 하려면 어떻게 해야 할까요?


    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;
    }
    
  • 프로필 알 수 없는 사용자님의 편집
    날짜2021.10.02

    html 화면 크기를 늘리면 backgroud 이미지랑 텍스트랑 분리되는데 함께 움직이게 하려면 어떻게 해야 할까요?


    html은 이렇고


    .
    .
    {{name}} 판정
    {{roll1}} {{success}}◈{{hard}}◈{{extreme}} <!-- 01 is always Critical --> {{#rollTotal() roll1 1}} Critical {{/rollTotal() roll1 1}} <!-- Is Success --> {{#rollBetween() roll1 2 success}} <!-- Is Standard --> {{#rollGreater() roll1 hard}} Success {{/rollGreater() roll1 hard}} <!-- Is Hard or Extreme --> {{#rollBetween() roll1 2 hard}} <!-- Is Hard --> {{#rollGreater() roll1 extreme}} Hard {{/rollGreater() roll1 extreme}} <!-- Is Extreme --> {{#rollBetween() roll1 2 extreme}} Extreme {{/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}} Fumble {{/rollTotal() roll1 100}} <!-- Is Fail --> {{#rollLess() roll1 100}} Fail {{/rollLess() roll1 100}} {{/rollGreater() success 49}} <!-- Is skill < 50 --> {{#rollLess() success 50}} <!-- Is Fumble --> {{#rollGreater() roll1 95}} Fumble {{/rollGreater() roll1 95}} <!-- Is Fail --> {{#rollLess() roll1 96}} Fail {{/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>
    


    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; }